Niestandardowe sterowanie odtwarzaczem wideo HTML5 za pomocą AngularJS

Question

Jestem nowy w AngularJS. Muszę utworzyć kontrole celne dla odtwarzacza wideo (HTML5 <video>). Zasadniczo użyłbym getElementById('myvideotag'), posłuchaj kliknięć wideo, aby odtworzyć/wstrzymać. Jak mogę to zrobić z AngularJS? Wiązanie kliknięcia z ng-click="videoPlayPause()", ale potem, jak odtwarzam lub wstrzymuję wideo. Jak korzystać z klasycznych metod <video>?

Sądzę, że to naprawdę proste ... Nie zdobyłem jeszcze wszystkich koncepcji AngularJS!

Dziękuję :)

Och, kod ... w widoku:

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

W prawym kontrolera:

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

Answer 1

Jak ten temat:

W swoim kodzie HTML ustaw ng-click="video($event)"(nie zapomnij o $event argument), który wywołuje następującą funkcję:

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

Wierzę, że to najprostsza metoda.

Documentation for angular.element

Ponadto, może to pomóc przyzwyczaić się do kątowa: How do I “think in AngularJS/EmberJS(or other client MVC framework)” if I have a jQuery background?

Answer 2

Dla pełnej kontroli, jak zachowanie i wygląd & dotyk, używam videoJS w kanciasty. Mam dyrektywę ui-video, która otacza element HTML5 video. Jest to konieczne, aby rozwiązać problem z integracją z 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 }); 
     } 
    }; 
}); 

Answer 3

Możesz również rzucić okiem na mój projekt Videogular.

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

Jest to odtwarzacz wideo napisany w angularjs, więc będziesz mieć wszystkie zalety wiązań i zmiennych zakresu. Możesz również pisać własne motywy i wtyczki.

Answer 4

użyłem również videojs

bower install videojs --save

chciałem używać mojego dyrektywę w ng-repeat iz zakresu przedmiotu, więc ... oto moja wersja to z rekwizytami Eduard powyżej. Wygląda na to, że nie miałem problemu z utylizacją odtwarzacza wideo, ale problem polegał na source tag issue referenced.

Postanowiłem również napisać to jako odpowiedź, dzięki czemu mógłbym podać przykład tego, jak można sobie poradzić z wydarzeniami wideojs.

WAŻNE! Uwaga! Używam Angular.js z szablonami Jinja2, więc musiałem zmienić swoje znaczniki interpolacji Angular HTML na {[ ]} z {{ }} w przypadku, gdy ktoś zauważy to jako dziwne. Uwzględnię też ten kod, więc nie jest to dla nikogo dziwne.

interpolacja dostrojenia

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

dyrektywa Wykorzystanie

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

    } 
    }; 
}); 

dyrektywa HTML

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