Html 使用 AngularJS 自定义 HTML5 视频播放器控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17913613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom HTML5 video player controls with AngularJS
提问by Eduard Gamonal
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 <video>)创建海关控制。基本上，我会使用getElementById('myvideotag')，听点击视频播放/暂停。我怎么能用 AngularJS 做到这一点？绑定点击，ng-click="videoPlayPause()"然后，我如何播放或暂停视频。我如何使用经典方法<video>？
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(); // ???
}
采纳答案by sushain97
How about this:
这个怎么样：
In your HTML, set ng-click="video($event)"(don't forget the $eventargument), 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
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 框架）中思考”？
回答by Eduard Gamonal
For full control, like behaviour and look&feel, I'm using videoJSin angular.
I have a ui-videodirective that wraps the videoHTML5 element. This is necessary to overcome a problem of integration with AngularJS:
为了完全控制，比如行为和外观，我使用videoJSangular。我有一个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 });
}
};
});
回答by elecash
You could also take a look to my project Videogular.
你也可以看看我的项目 Videogular。
https://github.com/2fdevs/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 编写的视频播放器，因此您将拥有绑定和范围变量的所有好处。您也可以编写自己的主题和插件。
回答by treejanitor
I also used videojs
我也用过videojs
bower install videojs --save
bower install videojs --save
I wanted to use my directive in a ng-repeatand 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 referencedwas an actual problem.
我想在 ang-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 插值标记更改为{[ ]}from{{ }}以防有人注意到这很奇怪。我也会包括那个代码，所以这对任何人来说都不奇怪。
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>
