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.

Answer 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