Clever Geek Handbook

HTML5 audio / video player control and pause with AngularJS

I want to control HTML5 audio / video player using AngularJS. I want to play and stop this player. I can do this with jQuery. But I need it to work with AngularJS.

+4


source to share


2 answers


  • https://github.com/2fdevs/videogular

  • creating your own custom directive can do the job for you (preferred and reusable),

    The easiest way is to use angular.element and select the required video element from the DOM using its functionality.

     <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 on angular.element https://docs.angularjs.org/api/ng/function/angular.element

+5


source


I hope this is helpful to you (change the domain name and file name correctly)



 <!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>
+2


source






More articles:


All Articles