使用AngularJS自定义HTML5视频播放器控件
Custom HTML5 video player controls with AngularJS
我是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(); // ???
}
对于完全控制,如行为和外观&感觉,我在angular中使用videoJS
。我有一个ui-video
指令,它封装了video
HTML5元素。这对于克服与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 });
}
};
});
这个怎么样:
在HTML中,设置ng-click="video($event)"
(不要忘记$event
参数),它调用以下函数:
$scope.video = function(e) {
var videoElements = angular.element(e.srcElement);
videoElements[0].pause();
}
我相信这是最简单的方法。
角度元件文件
此外,这可能有助于你习惯Angular:如果我有jQuery背景,我如何"在AngularJS/EmberJS(或其他客户端MVC框架)中思考"?
你也可以看看我的项目Videogular。
https://github.com/2fdevs/videogular
它是一个用AngularJS编写的视频播放器,因此您将拥有绑定和范围变量的所有好处。你也可以编写自己的主题和插件。
我也使用了videojs
bower install videojs --save
我想在ng-repeat
和scope对象中使用我的指令,所以……这是我的版本,上面有Eduard的道具。我似乎对视频播放器的处理没有问题,但引用的源标签问题是一个实际问题。
我还决定把这个写下来作为一个答案,这样我就可以给出一个如何处理videojs事件的例子。
重要请注意,我使用的是带有Jinja2模板的Angular.js,所以我不得不将我的Angular HTML插值标记从{{ }}
更改为{[ ]}
,以防有人注意到这很奇怪。我也会包含那个代码,所以对任何人来说都不奇怪。
插值调整
app.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('{[');
$interpolateProvider.endSymbol(']}');
}]);
指令
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);
});
}
);
}
};
});
指令HTML使用
<div ng-repeat="row in videos">
<ui-video video="row"></ui-video>
</div>
- 获取中继器控件ASP.Net中显示的单击项目文本框
- 中继器控件内的 IF 条件
- 水星编辑器 0.9 - 内容 iFrame 位于编辑器控件后面,高度错误
- 如何在WordPress中隐藏定制器控件
- 如何在 ajax javascript 中设置计时器控件
- 如何在绘图管理器控件的按钮上添加事件侦听器
- Birghtcove 无铬视频播放器控件在 Safari 中不起作用
- 自定义html5视频播放器控件元素中可用的按钮
- 中继器控件中文本框的自动完成
- 正在中继器控件中设置子标记属性
- 如何填充人员选取器控件
- 文本框中的Asp.Net日期选取器控件
- 使用AngularJS自定义HTML5视频播放器控件
- 获取Category筛选器控件的类型
- 将数据绑定到中继器控件中onclientclick()的链接按钮
- 正在删除相关中继器控件的视图状态
- 如何使用javascript创建范围验证器?在VS中不使用范围验证器控件
- 将jQuery选择器控件添加到phantomJS无头浏览器中
- 如何从一个中继器控件检索细节显示在模态弹出
- 从jquery模态弹出框中获取文本框值,其中包含重复器控件