HTML 禁止拖动Video进度条

来源：互联网发布：每日签到送淘宝淘金币编辑：程序博客网时间：2024/06/03 08:59

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

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

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>

这样就通过JS 直接完成了禁止拖动条

10/13更新

其实可以用CKPLAY 这个插件上面有各种调控

1 0