HTML 禁止拖动Video进度条

最新推荐文章于 2024-06-08 07:15:00 发布

mi七月

最新推荐文章于 2024-06-08 07:15:00 发布

阅读量3.3w

点赞数 6

文章标签： html html5 视频浏览器

本文链接：https://blog.csdn.net/m0_37729704/article/details/71480000

版权

在实现HTML5视频禁止用户拖动进度条的需求时，作者尝试了三种方法：覆盖进度条、使用第三方播放器插件和自定义进度条。覆盖方法简单但影响其他操作；第三方插件不熟悉；自定义进度条在全屏模式下失效。最后通过JS监听时间差实现了禁止拖动效果，或者推荐使用CKPLAY插件进行控制。

摘要由CSDN通过智能技术生成

其实当初我以为做这个很简单

然后我百度了一下，找到了以下几个办法

1、用个透明的层或图片把进度条盖住

2、如果是浏览器自动渲染是无法定义的，可以使用第三方的html5播放器插件，

3、自己写进度条

然后我需要一个去尝试
第一个很简单，一个DIV给挡住，但是包括进度条以及暂停和声量包括全屏无法点，我觉得挺好的，就按照这个做了，然后就被喷了，不满足客户需求，奖励继续留下来加班。

第二个用其他插件，感觉

<video id="my-video" controls preload="meta"data-setup="{}">
<source src="zgr.mp4" type="video/mp4">
</video>

上面这个对于我来说和插件没啥区别，因为我都不会….
PASS
第三个，写进度条
网上找了很多代码，做到了这个功能，但是一旦全屏，失效
PASS

然后我找啊找啊，想啊想啊，可以用获取进度条的时间来模拟这个功能

var video = document.getElementById("my-video"); //获取video对象
var time1=video.currentTime;//设置进度条

我只要去判断他前一秒和后一秒的视频时间差大于一秒的话，就让他们设置成前一秒的进度

废话不多说直接上代码

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">

关注