HTML 禁止拖动Video进度条

最新推荐文章于 2024-02-24 15:34:39 发布

VIP文章 mi七月

最新推荐文章于 2024-02-24 15:34:39 发布

阅读量3.3w

点赞数 6

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

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

版权

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

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

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">

关注