HTML5 video/audio player control play & pause with AngularJS
Question
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.
2 answers
solution1
5 ACCPTED 2015-06-17 18:34:01
- 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
solution2
2 2015-06-17 18:34:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.