6

私はAngularJSが初めてです。ビデオ プレーヤー (HTML5 <video>) のカスタム コントロールを作成する必要があります。基本的に、getElementById('myvideotag')再生/一時停止のためにビデオのクリックを使用します。AngularJS でこれを行うにはどうすればよいですか? クリックをバインドしますがng-click="videoPlayPause()"、その後、ビデオを再生または一時停止する方法。の古典的な方法をどのように使用し<video>ますか?

本当に簡単だと思います... AngularJS のすべての概念をまだ理解していません!

ありがとうございました ：）

ああ、コード... ビューで：

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

右のコントローラーで:

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

4 に答える 4

3

私のプロジェクト Videogular もご覧ください。

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

これは AngularJS で作成されたビデオ プレーヤーであるため、バインディングとスコープ変数のすべての利点が得られます。また、独自のテーマとプラグインを作成することもできます。

于 2013-10-25T15:42:13.830 に答える
1

私もvideojsを使用しました

bower install videojs --save

私は自分のディレクティブをng-repeatスコープ オブジェクトと一緒に使用したかったので、上記の Eduard への小道具を使用した私のバージョンを次に示します。動画プレーヤーの処分に問題があったようには見えませんでしたが、参照されているソースタグの問題は実際の問題でした。

また、これを回答として書き留めることにしました。これにより、videojs イベントを処理する方法の例を示すことができます。

重要！私は Jinja2 テンプレートで Angular.js を使用していることに注意{[ ]}してください{{ }}。そのコードも含めますので、誰にとっても変ではありません。

補間微調整

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

指令

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

    }
  };
});

ディレクティブ HTML の使用法

  <div ng-repeat="row in videos">
        <ui-video video="row"></ui-video>
  </div>
于 2015-03-06T11:22:49.213 に答える