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.
-
so you will have an extra button to do this or just the players options?Gerasimos Pap– Gerasimos Pap2015-06-17 18:23:06 +00:00Commented Jun 17, 2015 at 18:23
-
1Can you provide least code that you tried so far.vinayakj– vinayakj2015-06-17 18:30:02 +00:00Commented Jun 17, 2015 at 18:30
Add a comment
|
2 Answers
- 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
Comments
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>
