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.
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
- 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() } }
more about angular.element https://docs.angularjs.org/api/ng/function/angular.element
回答2:
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>