vue中简单实现video禁止快进

原创 leechee 随笔 video 34阅读 23 天前 举报

1.需要video标签并设置好src属性

2.需要监听video的三个事件:

  • seeking【当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。】
  • seeked【当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。】
  • timeupdate【当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。】

3.记录previousTime【始终等于上一帧的currentTime】,currentTime【等于当前video的currentTime属性】,seekStartTime【保存previousTime】,
4.快进条拖拽结束后,如果currentTime大于seekStartTime,将video的当前时间强制改回seekStartTime。


代码如下:(欢迎指正)

评论 ( 1 )
最新评论
leechee 23 天前 1F

更新,防止用户来回拖拽造成禁止快进失效
新增事件并在该事件将seekStart设置为null
@touchend=ontouchend

ontouchend(){
this.seekStart = null;
}