Custom HTML5 video player controls with AngularJS

Question

I\'m new with AngularJS. I must create customs controls for a video player (HTML5 ). Basically, I would use getElementById(\'myvideotag\')

Answer 1

I also used videojs

bower install videojs --save

I wanted to use my directive in a ng-repeat and with a scope object, so... here's my version of it with props to Eduard above. I didn't seem to have a problem with the video player disposal, but the source tag issue referenced was an actual problem.

I also decided to write this up as an answer, so that I could give an example of how one might want to handle the videojs events.

IMPORTANT! Please note I am using Angular.js with Jinja2 templates, so I had to change my Angular HTML interpolation markers to {[ ]} from {{ }} in case anyone notices that as weird. I'll include that code too, so it's not weird for anyone.

Interpolation tweak

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[');
  $interpolateProvider.endSymbol(']}');
}]);

Directive

angular.module('myModule').directive('uiVideo', function () {

  // Function for logging videojs events, possibly to server
  function playLog(player, videoId, action, logToDb) {
    action = action || 'view';
    var time = player.currentTime().toFixed(3);

    if (logToDb) {
      // Implement your own server logging here
    }

    // Paused
    if (player.paused()) {
      console.log('playLog: ', action + " at " + time + " " + videoId);

    // Playing
    } else {
      console.log('playLog: ', action + ", while playing at " + time + " " + videoId);
      if (action === 'play') {
        var wrapFn = function () {
          playLog(player, videoId, action, logToDb);
        };
        setTimeout(wrapFn, 1000);
      }
    }
  }

  return {
    template: [
      '
',
        '',
      '
'
    ].join(''),
    scope: {
      video: '=video',
      logToDb: '=logToDb'
    },
    link: function (scope, element, attrs) {
      scope.logToDb = scope.logToDb || false;

      var videoEl = element[0].children[0].children[0];
      var vp = videojs(videoEl, {},
        function(){
          this.on("firstplay", function(){
            playLog(vp, scope.video.id, 'firstplay', scope.logToDb);
          });
          this.on("play", function(){
            playLog(vp, scope.video.id, 'play', scope.logToDb);
          });
          this.on("pause", function(){
            playLog(vp, scope.video.id, 'pause', scope.logToDb);
          });
          this.on("seeking", function(){
            playLog(vp, scope.video.id, 'seeking', scope.logToDb);
          });
          this.on("seeked", function(){
            playLog(vp, scope.video.id, 'seeked', scope.logToDb);
          });
          this.on("ended", function(){
            playLog(vp, scope.video.id, 'ended', scope.logToDb);
          });
        }
      );

    }
  };
});

Directive HTML usage