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

Question

我是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(); // ???
}

Answer 1

为了完全控制,如行为和外观,我正在使用videoJS角度.我有一个ui-video包装videoHTML5元素的指令.这是克服与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 2

这个怎么样：

\n\n

在 HTML 中，设置ng-click="video($event)" (不要忘记$event参数)，它调用以下函数：

\n\n

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

\n\n

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

\n\n

angular.element 的文档

\n\n

另外，这可能会帮助您习惯 Angular：如果我有 jQuery 背景，How do I \xe2\x80\x9cthink in AngularJS/EmberJS(or other client MVC Framework)\xe2\x80\x9d?

\n