Benutzerdefinierten HTML5-video-player steuert mit AngularJS

Volle Kontrolle, wie Verhalten und look&fühlen, ich bin mit videoJS im Winkel.
Ich habe eine ui-video Richtlinie, die umschließt die video HTML5-element. Dies ist notwendig, um das problem der integration mit 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: '<div class="video">' +
            '<video ng-src="{{ properties.src }}" id="video-' + videoId + '" class="video-js vjs-default-skin" controls preload="auto" >' +
                //'<source  type="video/mp4"> '+     /* seems not yet supported in angular */
                'Your browser does not support the video tag. ' +
            '</video></div>',
        link: function (scope, element, attrs) {
            scope.properties = 'whatever url';
            if (vp) vp.dispose();
            vp = videojs('video-' + videoId, {width: 640, height: 480 });
        }
    };
});

InformationsquelleAutor Eduard Gamonal

Ich auch videojs

bower install videojs --save

Wollte ich mit meinem Richtlinie in einem ng-repeat und mit einem scope-Objekt, also... hier ' s meine version von es mit Requisiten zu Eduard vor. Ich didn T scheinen ein problem zu haben mit dem video-player zur Verfügung, aber die source-tag-Problem verwiesen war tatsächlich ein problem.

Entschied ich mich auch zu schreiben, dies als eine Antwort, damit könnte ich ein Beispiel geben, wie könnte man damit umgehen will den videojs Veranstaltungen.

WICHTIG! Bitte beachten Sie, ich bin mit Angular.js mit Jinja2 Vorlagen, so musste ich meine HTML-Winkel-interpolation Marker {[ ]} aus {{ }} im Fall, dass jemand bemerkt, wie seltsam. Ich werde auch, dass der code auch, so ist es nicht seltsam für jeden.

Interpolation zwicken

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

Richtlinie

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: [
      '<div class="video">',
        '<video id="video-{[ video.id ]}" class="video-js vjs-default-skin img-responsive" controls preload="none"',
          ' ng-src="{[ video.mp4 ]}"',
          ' poster="{[ video.jpg ]}"',
          ' width="240" height="120">',
        '</video>',
      '</div>'
    ].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);
          });
        }
      );

    }
  };
});

Richtlinie HTML-Benutzung

  <div ng-repeat="row in videos">
        <ui-video video="row"></ui-video>
  </div>

InformationsquelleAutor treejanitor