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

问题描述

问 题

如题

解决方案

隐藏浏览器自带的控制条自己实现一个控制器

用户习惯于在看视频时查看已经播放了多少，和还剩多少。

给你的播放器添加一个简单的进度条，可以用 div 标签和 span 标签。可以增加 span 的宽度来显示视频的进度。

<div id="progressBar"><span id="progress"></span></div>

当然，你也希望用一些css，这样才能看出span的效果：

#progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:20px;
}
#progress {
   background-color:#ff0000; // red
   height:20px;
   display:inline-block;
}

然后，定义一个函数，它能够通过改变 span 元素的 width 来更新进度条。

function updateProgress() {
   var progress = document.getElementById("progress");
   var value = 0;
   if (video.currentTime > 0) {
      value = Math.floor((100 / video.duration) * video.currentTime);
   }
   progress.style.width = value + "%";
}

这个函数的第一行包含一个控制器来处理进程 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);
现在，你的进度条就会随着视频的播放而不断更新。

加一个点击事件判断点击位置，如果点击位置在当前位置之前，允许跳转，否则不允许跳转

也可以看这个 http://www.imooc.com/article/...

里面有跳跃播放的代码，直接做一个判断就行，原理与我描述的一致，判断鼠标点击的位置

这篇关于javascript - 如何控制H5 video 只能后退（向后拖动）不能快进（向前拖动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！