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

共3个文件

js：1个

mp4：1个

html：1个

video

需积分: 50 68 下载量 135 浏览量 2019-03-24 12:47:03 上传评论 5 收藏 17.7MB RAR 举报

温馨提示

利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。

资源推荐

资源详情

资源评论

收起资源包目录

video.rar （3个子文件）

video

images

test.mp4 17.92MB

jquery-1.11.3.min.js 94KB

video_detail.html 999B

共 3 条

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

评论收藏

内容反馈