Capture html5 video event in angular controller

Question

<video id="video-player" ng-click="togglePlayer($event)" 
       oncontextmenu="return false" autoplay="true" loop 
       class="composition-video" ng-src="{{url}}" type="video/mp4"></video>

How can I capture the event for when the video player state changed in the controller in angularjs?

Answer 1

Here is a possible way using a directive which add listeners to your video element:

http://plnkr.co/edit/dOm5TnGiSkJAUAtXSFa1?p=preview

.directive('videoEvents', function () {
    return function ($scope, $element) {
      $element[0].addEventListener("loadeddata", function () {
        console.log('loadeddata');
        // you can $rootScope.$broadcast...
      });
      $element[0].addEventListener("playing", function () {
        console.log('playing');
        // you can $rootScope.$broadcast...
      });
      // and so on...
    }
});