通过加速或跳过网页视频解决进度条无法拖动问题

Posted 2023-04-09 CKeon

加速网页视频与跳过网页视频
1、加速网页视频
（1）F12打开开发者工具，然后Ctrl+Shift+C检查video元素
检查video元素
（2）控制台输入脚本

function accelerate()
let video = document.querySelector(‘video’);
function play()
video.playbackRate = 15; // 加速至原速的15倍
video.play();

setInterval(play, 100); // 定时播放，防止被js恢复原速或暂停

accelerate()

注意，视频倍速有一定限制，超过一定限制会报错，我的是最高15或16倍速，可自行调试。

2、跳过网页视频
（1）同上，F12打开开发者工具，然后Ctrl+Shift+C检查video元素
（2）控制台输入脚本
function skip()
let video = document.querySelector(‘video’);
video.currentTime = video.duration;
/*
duration获取视频时长，currentTime是视频当前的播放时间，
通过重置currentTime跳过视频
有时会出现卡顿，可考虑保留几秒缓冲
考虑使用：video.currentTime = video.duration - 3 ; //播放缓冲为3秒
*/

skip()

以上方法仅仅提供了视频快进与跳过的思路，真实情况要稍微复杂一些。

以上方法仅适用于网页上只有单个video标签的情况（比如爱奇艺、网课），如果网页上有多个video标签（比如优酷），就要根据实际情况作进一步修改，而且针对不同网站，处理的方法也有所差异。

3、视频加速
适用于爱奇艺、优酷

var interval_id
function accelerate()
let video = document.getElementsByTagName(‘video’);
for (let i=0; i<video.length; i++)
try
if (video[i].duration<131) // 根据时长判断是否为广告
video[i].playbackRate = 15; // 加速至原速的15倍
if (!video[i].isPlay)
video[i].play()

elsevideo[i].playbackRate=1
catch(err)console.log(err)


interval_id = setInterval(accelerate, 800); // 定时播放，防止被js恢复原速或暂停
setTimeout(‘clearInterval(interval_id)’,8000)

适用于网课

function accelerate()
let video = document.getElementsByTagName(‘video’);
for (let i=0; i<video.length; i++)
try
video[i].playbackRate = 15; // 加速至原速的15倍
if (!video[i].isPlay)
video[i].play()

catch(err)console.log(err)


setInterval(accelerate, 800); // 定时播放，防止被js恢复原速或暂停
4、视频跳过
适用于优酷，但似乎不适用于跳过爱奇艺广告

var interval_id
function skip()
let video = document.getElementsByTagName(‘video’)
for (let i=0; i<video.length; i++)
try
if (video[i].duration<131)
video[i].currentTime = video[i].duration

catch(err) console.log(err)


interval_id = setInterval(skip,800)
setTimeout(‘clearInterval(interval_id)’,600)

适用于网课

function skip()
let video = document.getElementsByTagName(‘video’)
for (let i=0; i<video.length; i++)
video[i].currentTime = video[i].duration


skip()

内容有限，若无法解决问题，可另寻他法。

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"");//上传文件时都会有这些参数的