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

For full control, like behaviour and look&feel, I'm using videoJS in angular. I have a ui-video directive that wraps the video HTML5 element. This is necessary to overcome a problem of integration with AngularJS:

m.directive('uiVideo', function () {
    var vp; // video player object to overcome one of the angularjs issues in #1352 (https://github.com/angular/angular.js/issues/1352). when the videojs player is removed from the dom, the player object is not destroyed and can't be reused.
    var videoId = Math.floor((Math.random() * 1000) + 100); // in random we trust. you can use a hash of the video uri

    return {
        template: '
' +
            '
',
        link: function (scope, element, attrs) {
            scope.properties = 'whatever url';
            if (vp) vp.dispose();
            vp = videojs('video-' + videoId, {width: 640, height: 480 });
        }
    };
});