Javascript实现Video视频进度条拖动无效

Posted 2023-03-29 xuanqinzi

在某些时候项目中会用到video，想让用户看完视频而不是一下拖到底结束，这种时候就要实现进度条拖动失效，用户拖动时会记录拖动上一秒的currentTime，在拖动结束后返回上一秒的位置，以此实现拖动失效效果，代码如下

html

        <video controls="controls" src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4" ></video>

js

        var video = document.querySelector('video');

        var old = 0;
        video.ontimeupdate = function()
            var cuTime = video.currentTime;
            if (cuTime - old > 2)
              video.currentTime = old;
             else
              old = cuTime;
            
        

video标签播放视频不能拖动进度条

因为你的video的src不是直接使用视频文件的地址，而是通过后台接口返回文件流，后台返回流的时候没为response的header设置一些参数，否则会在部分浏览器有问题

String rangeString = request.getHeader("Range");//如果是video标签发起的请求就不会为null

long range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));

response.setHeader("Content-Type", "video/mp4");

response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode("视频文件名称.mp4" , "UTF-8"));

response.setContentLength(10000);//10000是视频文件的大小，上传文件时都会有这些参数的

response.setHeader("Content-Range", String.valueOf(range + (10000-1)));//拖动进度条时的断点，其中10000是上面的视频文件大小，改成你的就好

response.setHeader("Accept-Ranges", "bytes");

response.setHeader("Etag", "W/"9767057-1323779115364"");//上传文件时都会有这些参数的