如何控制H5 video 只能后退（向后拖动）不能快进（向前拖动）

Question

如题

Answer 1

隐藏浏览器自带的控制条自己实现一个控制器用户习惯于在看视频时查看已经播放了多少，和还剩多少。给你的播放器添加一个简单的进度条，可以用 div 标签和 span 标签。可以增加 span 的宽度来显示视频的进度。<div&nbsp;id="progressBar"><span&nbsp;id="progress"></span></div>当然，你也希望用一些css，这样才能看出span的效果：#progressBar&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;border:1px&nbsp;solid&nbsp;#aaa;&nbsp; &nbsp;&nbsp;&nbsp;color:#fff;&nbsp; &nbsp;&nbsp;&nbsp;width:295px;&nbsp; &nbsp;&nbsp;&nbsp;height:20px; }#progress&nbsp;{&nbsp;&nbsp;&nbsp;background-color:#ff0000;&nbsp;//&nbsp;red &nbsp;&nbsp;&nbsp;height:20px;&nbsp;&nbsp;&nbsp;display:inline-block; }然后，定义一个函数，它能够通过改变 span 元素的 width 来更新进度条。function&nbsp;updateProgress()&nbsp;{&nbsp;&nbsp;&nbsp;var&nbsp;progress&nbsp;=&nbsp;document.getElementById("progress");&nbsp;&nbsp;&nbsp;var&nbsp;value&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;if&nbsp;(video.currentTime&nbsp;>&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;Math.floor((100&nbsp;/&nbsp;video.duration)&nbsp;*&nbsp;video.currentTime); &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;progress.style.width&nbsp;=&nbsp;value&nbsp;+&nbsp;"%"; }这个函数的第一行包含一个控制器来处理进程 span 元素自身。它检查 video 元素的 currentTime 属性值，这个值定义了当前的播放位置，以秒来记。如果 currentTime 大于 0表示视频已经被播放，它使用 video 元素的 duration 属性来计算当前进度的百分数，duration 属性定义了视频的总长度，以秒来计算。最后，它将结果赋值给进程 span 的CSS width 。在上面的播放，暂停，静音等时，你可以使用如 onclick 和 onchange 等事件来调用相应的函数。但是这个进度条却不行，因为这是视频进度的响应，而非和用户交互。当然，HTML5的媒体元素API也增加了几个可以侦听的事件来实现该功能。其中一个就是 timeupdate 事件，每当 currentTime 属性改变的时候就会触发出此事件。（即当媒体开始播放后就会连续不断的触发。）在你的web页的JavaScript初始化代码中，当 timeupdate 事件被激活时，添加一个事件监听器来调用updateProgress 函数：video.addEventListener("timeupdate", updateProgress, false);现在，你的进度条就会随着视频的播放而不断更新。加一个点击事件判断点击位置，如果点击位置在当前位置之前，允许跳转，否则不允许跳转也可以看这个&nbsp;http://www.imooc.com/article/...里面有跳跃播放的代码，直接做一个判断就行，原理与我描述的一致，判断鼠标点击的位置