html，video禁止拖动进度条，禁止快进

最新推荐文章于 2024-08-14 09:02:55 发布

GustavoLi

最新推荐文章于 2024-08-14 09:02:55 发布

阅读量1.6w

点赞数 4

文章标签： video h5

本文链接：https://blog.csdn.net/qq_36459088/article/details/88775639

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
       <title>微视频</title>
   </head>
   <style>
       html,body{overflow-x:hidden ;margin:0;padding:0;box-sizing: border-box;background-color:#fff;}
       *{margin:0;padding:0;}
       .vedio_wra{width:100%;}
       .vedio_wra video{width:100%;}
   </style>
   <body>
       <div class="vedio_wra">
           <video controls id="video">
           <source src="images/test.mp4" type="video/mp4">
           <source src="images/test.mp4" type="video/ogg">
               您的浏览器不支持Video标签。
           </video>
       </div>
   </body>
   <script src="js/jquery-1.11.3.min.js"></script>

   <script>
       // 禁止快进
       var sym;
       var video=document.querySelector("#video")
       setInterval(function () {
           var time=video.currentTime
           if(time-sym>1){
               video.currentTime=sym

           }
           sym=video.currentTime
       },500);
   </script>
</html>