AngularJS：双向绑定视频的currentTime with directive

发布时间：2020-12-17 06:46:59 所属栏目：安全来源：网络整理

导读：我一直试图找出一个简单的指令模式来控制 html5视频/ youtube视频. 我想用“Angular方式”来做,因此将视频的属性绑定到对象模型.但是,当处理视频的“currentTime”属性时,我遇到了一些问题,因为它会不断更新. 这是我到目前为止所得到的： HTML控件： !--rang

我一直试图找出一个简单的指令模式来控制 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秒.

这有时会创建一个循环,导致视频有时滞后.

你认为有更好的方法吗？一种不会触发不必要的$watch的方法？任何建议表示赞赏.

解决方法

一些 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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!