HTML 禁止拖动Video进度条

最新推荐文章于 2025-06-17 11:43:16 发布

原创最新推荐文章于 2025-06-17 11:43:16 发布 · 3.4w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #视频 #浏览器

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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">
        <title>Video.js 5.18.4</title>
        <link href="css/video-js.css" rel="stylesheet">
        <!-- If you'd like to support IE8 -->
        <script src="js/videojs-ie8.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        </style>
        <script type="text/javascript">
            var int = self.setInterval("setControl()", 1)
            var int = self.setInterval("tesst()", 100)
            //让其一直显示进度条
            function setControl() {
                var video = document.getElementById("my-video"); //获取video对象
                video.controls = true; //设置控制条显示
            }
            var zq = 0;
            var zh = -1;
            var hou = 0;
            function tesst() {
                var v2 = document.getElementById("v2");
                v2.innerHTML = hou;
                var s = document.getElementById("zzbf");
                var b = document.getElementById("zzbf2");
                var v1 = document.getElementById("v1");
                var v3 = document.getElementById("v3");
                zq = zq + 1;
                zh = zh + 1;
                var video = document.getElementById("my-video"); //获取video对象
                var time1 = video.currentTime;
                var xc = time1 - hou;
                v3.innerHTML = xc;
                if(xc > 2) {
                    document.getElementById("my-video").pause();
                    video.currentTime = hou;
                }
                if(xc <= -2) {
                }
                hou = time1;
                v1.innerHTML = time1;
                s.innerHTML = zq;
                b.innerHTML = zh;
            }
            var i = 0;

            function stop() {
                //点击暂停播放 
                if(i == 0) {
                    document.getElementById("my-video").pause();
                    i = 1;
                } else {
                    document.getElementById('my-video').play();
                    i = 0;
                }
            }
        </script>
    </head>

    <body>

        <div class="m" id="bf">
            现在<span id="zzbf">0</span> 前一秒<span id="zzbf2">0</span></br>
            视频当前播放:<span id="v1">0</span>&nbsp;&nbsp;&nbsp; 视频前一秒:<span id="v2">0</span>&nbsp;&nbsp;&nbsp; 相差:<span id="v3">0</span>
            <video id="my-video" controls preload="meta" height="70%" width="100%" onclick="stop()" data-setup="{}">
                <source src="zgr.mp4" type="video/mp4">
            </video>

        </div>

    </body>

</html>