使用AngularJS自定义HTML5视频播放器控件

I'm new with AngularJS. I must create customs controls for a video player (HTML5 <video>). Basically, I would use getElementById('myvideotag'), listen clicks on the video for play/pause. How I can do this with AngularJS ? Binding the click with ng-click="videoPlayPause()" but then, how I play or pause the video. How I use the classic methods of <video> ?

我是AngularJS的新手。我必须为视频播放器创建海关控制(HTML5

I guess it's really simple... I didn't get all the AngularJS concepts yet !

我想这很简单......我还没有得到所有的AngularJS概念!

Thank you :)

谢谢 :)

Oh, the code... in the view:

哦,代码......在视图中:

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

In the right controller:

在正确的控制器中:

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

4 个解决方案

#1

How about this:

这个怎么样:

In your HTML, set ng-click="video($event)" (don't forget the $event argument), which calls the following function:

在你的HTML中,设置ng-click =“video($ event)”(不要忘记$ event参数),它调用以下函数:

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

I believe this is the simplest method.

我相信这是最简单的方法。

Documentation for angular.element

angular.element的文档

Also, this might help you get used to Angular: How do I “think in AngularJS/EmberJS(or other client MVC framework)” if I have a jQuery background?

此外,这可能会帮助您习惯Angular:如果我有jQuery背景,我如何“在AngularJS / EmberJS(或其他客户端MVC框架)中思考”?

#2

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:

为了完全控制,比如行为和外观,我正在使用有角度的videoJS。我有一个包含视频HTML5元素的ui-video指令。这是克服与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 });
        }
    };
});

#3

You could also take a look to my project Videogular.

您还可以查看我的项目Videogular。

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

It's a video player written in AngularJS, so you will have all the benefits of bindings and scope variables. Also you could write your own themes and plugins.

它是一个用AngularJS编写的视频播放器,因此您将拥有绑定和范围变量的所有好处。你也可以编写自己的主题和插件。

#4

I also used videojs

我也用过videojs

bower install videojs --save

凉亭安装videojs --save

I wanted to use my directive in a ng-repeat and with a scope object, so... here's my version of it with props to Eduard above. I didn't seem to have a problem with the video player disposal, but the source tag issue referenced was an actual problem.

我想在ng-repeat和范围对象中使用我的指令,所以......这是我的版本,上面有Eduard的道具。我似乎没有处理视频播放器的问题,但引用的源标记问题是一个实际问题。

I also decided to write this up as an answer, so that I could give an example of how one might want to handle the videojs events.

我还决定把它写成答案,这样我就可以给出一个如何处理videojs事件的例子。

IMPORTANT! Please note I am using Angular.js with Jinja2 templates, so I had to change my Angular HTML interpolation markers to {[ ]} from {{ }} in case anyone notices that as weird. I'll include that code too, so it's not weird for anyone.

重要!请注意我将Angular.js与Jinja2模板一起使用,因此我必须将{Angular HTML插值标记从{{}}更改为{[]},以防有人注意到这一点。我也会包含那些代码,所以对任何人来说都不奇怪。

Interpolation tweak

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

Directive

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

    }
  };
});

Directive HTML usage

指令HTML用法

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

#1