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

Question

我是 AngularJS 的新手。我必须为视频播放器 (HTML5 <video>) 创建海关控制。基本上，我会使用 getElementById('myvideotag') , 听点击视频播放/暂停。我如何使用 AngularJS 做到这一点？使用 ng-click="videoPlayPause()" 绑定(bind)点击但是，我如何播放或暂停视频。我如何使用<video>的经典方法？

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

谢谢你:)

哦，代码...在 View 中:

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

在右 Controller 中:

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

Answer 1

为了完全控制，比如行为和外观，我在 Angular 中使用 videoJS。我有一个包装 video 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 });
        }
    };
});