Javascript HTML5 视频/音频播放器使用 AngularJS 控制播放和暂停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30899331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video/audio player control play & pause with AngularJS
提问by Bilash
I want to control HTML5 audio/video player with AngularJS. I want to play & pause that player. I can do this using jQuery. But I need it to work with AngularJS.
我想用 AngularJS 控制 HTML5 音频/视频播放器。我想播放并暂停该播放器。我可以使用 jQuery 做到这一点。但我需要它与 AngularJS 一起工作。
回答by Shushanth Pallegar
- https://github.com/2fdevs/videogular
creating your own custom directive can does the job for you (Preferred and reusable),
The simplest way is using angular.element and selecting the required video element from the DOM using its functionalities.
<video autoplay="autoplay" preload="auto" ng-click="pauseOrPlay()"> <source src="{{url }}" type="video/mp4" /> </video>//controller
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() } }
- 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() } }
more about angular.element https://docs.angularjs.org/api/ng/function/angular.element
更多关于 angular.element https://docs.angularjs.org/api/ng/function/angular.element
回答by scaisEdge
I hope this is useful for you (change the domain name and the filename properly)
我希望这对您有用（正确更改域名和文件名）
<!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>
