我是 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(); // ???
}
最佳答案
为了完全控制,比如行为和外观,我在 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 });
}
};
});
关于javascript - 使用 AngularJS 自定义 HTML5 视频播放器控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17913613/