Benutzerdefinierte HTML5-Videoplayer steuert mit AngularJS

Question

Ich bin neu mit AngularJS. Ich muss Zollkontrollen für einen Videoplayer erstellen (HTML5). Grundsätzlich würde ich getElementById('myvideotag') verwenden, klicke auf das Video für Play/Pause. Wie kann ich dies mit AngularJS tun? Verbinde den Klick mit ng-click="videoPlayPause()" aber dann, wie ich das Video abspiele oder pausiere. Wie benutze ich die klassischen Methoden von <video>?

Ich denke, es ist wirklich einfach ... Ich habe noch nicht alle AngularJS Konzepte bekommen!

Danke

Oh, den Code ... in der Ansicht :):

<video autoplay="autoplay" preload="auto" ng-click="video()"> 
    <source src="{{ current.url }}" type="video/mp4" /> 
</video> 

im rechten Controller:

$scope.video = function() { 
    this.pause(); // ??? 
} 

Answer 1

Wie wäre es damit:

Setzen Sie in Ihrem HTML-Code (vergessen Sie nicht die $event Argument), die folgende Funktion aufruft:

$scope.video = function(e) { 
    var videoElements = angular.element(e.srcElement); 
    videoElements[0].pause(); 
} 

Ich glaube, dies ist die einfachste Methode.

Documentation for angular.element

Auch dies könnte Sie Angular gewöhnungs helfen: How do I “think in AngularJS/EmberJS(or other client MVC framework)” if I have a jQuery background?

Answer 2

Für die volle Kontrolle, wie Verhalten und & Gefühl aussehen, ich bin mit videoJS in eckig. Ich habe eine ui-video Direktive, die das video HTML5-Element umschließt. Dies ist notwendig, ein Problem der Integration mit AngularJS zu überwinden:

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 }); 
     } 
    }; 
}); 

Answer 3

Sie auch einen Blick auf mein Projekt Videogular nehmen konnte.

https://github.com/2fdevs/videogular

Es ist ein Video-Player in AngularJS geschrieben, so dass Sie alle Vorteile von Bindungen und Umfang Variablen haben. Sie könnten auch Ihre eigenen Themen und Plugins schreiben.

Answer 4

habe ich auch videojs

bower install videojs --save

Ich wollte meine Direktive in einem ng-repeat und mit einem Rahmen-Objekt verwenden, so ... hier ist meine Version davon mit Requisiten oben zu Eduard. Ich hatte anscheinend kein Problem mit der Video-Player-Entsorgung, aber die source tag issue referenced war ein echtes Problem.

Ich entschied mich auch, dies als eine Antwort zu schreiben, so dass ich ein Beispiel geben könnte, wie man die videojs Ereignisse behandeln könnte.

WICHTIG! Bitte beachten Sie, dass ich Angular benutze.js mit Jinja2-Vorlagen, also musste ich meine Angular HTML-Interpolationsmarkierungen auf {[ ]} von {{ }} ändern, falls das jemand merkwürdig findet. Ich werde diesen Code auch einbeziehen, also ist es für niemanden seltsam.

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 Nutzung

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