使用AngularJS进行HTML5视频/音频播放器控制播放和暂停
[英]HTML5 video/audio player control play & pause with AngularJS
问题描述
我想用AngularJS控制HTML5音频/视频播放器。 我想玩和暂停那个玩家。 我可以使用jQuery来做到这一点。 但我需要它与AngularJS合作。
2 个解决方案
解决方案1
5 已采纳 2015-06-17 18:34:01
- https://github.com/2fdevs/videogular
创建自己的自定义指令可以为您完成工作（首选和可重用），
最简单的方法是使用angular.element并使用其功能从DOM中选择所需的视频元素。
<video autoplay="autoplay" preload="auto" ng-click="pauseOrPlay()"> <source src="{{url }}" type="video/mp4" /> </video>//控制器
function myCtrl($scope) { $scope.url = "url of video or audio" $scope.pauseOrPlay = function(ele){ var video = angular.element(ele.srcElement); video[0].pause(); // video.play() } }
更多关于angular.element的信息https://docs.angularjs.org/api/ng/function/angular.element
解决方案2
2 2015-06-17 18:34:03
我希望这对你有用（正确更改域名和文件名）
<!DOCTYPE html>
<html>
<head>
<title>Video Demo </title>
</head>
<body>
<video id="video" controls>
<source src=http://your_domain_source/video.webm type=video/webm>
<source src=http://your_domani_source/video-canvas-magic/video.ogg type=video/ogg>
<source src=http://your_domain_source/demos/video-canvas-magic/video.mp4 type=video/mp4>
</video>
<p>controls :</p>
<button onclick="playVideo();" style="cursor: pointer;">Play</button>
<button onclick="pauseVideo();" style="cursor: pointer;">Pause</button>
<button onclick="rewindVideo();" style="cursor: pointer;">
Back to beginning</button>
<script>
video = document.querySelector("#vid");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function rewindVideo() {
video.currentTime = 0;
}
</script>
</body>
</html>
如何在HTML5音频中控制播放和暂停
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.