我一直试图找出一个简单的指令模式来控制
html5视频/ youtube视频.
我想用“Angular方式”来做,因此将视频的属性绑定到对象模型.但是,当处理视频的“currentTime”属性时,我遇到了一些问题,因为它会不断更新.
这是我到目前为止所得到的：
HTML控件：
<!--range input that both show and control $scope.currentTime --> <input type="range" min=0 max=60 ng-model="currentTime"> <!--bind main $scope.currentTime to someVideo directive's videoCurrentTime --> <video some-video video-current-time="currentTime"> </video>
指示：
app.controller('MainCtrl',function ($scope) {
$scope.currentTime = 0;
})
app.directive('someVideo',function ($window) {
return{
scope: {
videoCurrentTime: "=videoCurrentTime"
},controller: function ($scope,$element) {
$scope.onTimeUpdate = function () {
$scope.videoCurrentTime = $element[0].currentTime;
$scope.$apply();
}
},link: function (scope,elm) {
scope.$watch('videoCurrentTime',function (newVar) {
elm[0].currentTime = newVar;
});
elm.bind('timeupdate',scope.onTimeUpdate);
}
}
})
JSFiddler：http://jsfiddle.net/vQ5wQ/
::
虽然这似乎有效,但请注意,每次onTimeUpdate触发时,都会触发$watch.
例如,当视频运行到10秒时,它通知onTimeUpdate将模型更改为10,$watch将捕获此更改并要求视频再次寻找10秒.
这有时会创建一个循环,导致视频有时滞后.
解决方法
一些
timeupdate documentation的摘录说,当你使用时,会调用timeupdate绑定的函数
- Play the video
- Move the position indicator on the playback controls
因此,当回放被修改时,事件会被触发,并且您不需要显式地$观察附加到该回放控件的模型.
这意味着您可以在timeupdate侦听器中执行这两个更新,而不是在watch语句中进行外部模型到视频分配…但请确保检查其注释中提到的jkjustjoshing之类的阈值以便确保控件实际上已被移动.
$scope.onTimeUpdate = function () {
var currTime = $element[0].currentTime;
if (currTime - $scope.videoCurrentTime > 0.5 ||
$scope.videoCurrentTime - currTime > 0.5) {
$element[0].currentTime = $scope.videoCurrentTime;
}
$scope.$apply(function () {
$scope.videoCurrentTime = $element[0].currentTime;
});
};
另一个注意事项：我不确定这是否与您相关,但是一旦视频结束,即使您设置了currentTime,它也不会再次播放,直到您明确调用play().要解决此问题,您可以在videoCurrenTime上使用$watch语句,如果视频结束,则会重新启动视频.
你原来的代码不是很迟钝,但这里有一个更新的小提琴,似乎有几秒钟的延迟(至少从我有限的测试)：
http://jsfiddle.net/B7hT5/
