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

CKeon CKeon     2023-04-09     894

关键词:

加速网页视频与跳过网页视频
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标签视频无法拖动进度条快进问题(django)(代码片段)

因为后端返回的是视频的文件流,并不是视频文件地址。后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如GoogleChrome...)。django中常用返回文件流写法:classVideoAPIView(APIView):"""视频视图-... 查看详情

html5video标签怎样禁止拖动或者点击进度条

...果你是要可以控制播放和暂停的话就实现js控制,反正是跳过video自带的控制器自己去写。2、用个透明的层或图片把进度条盖住 参考技术B如果是浏览器自动渲染是无法定义的,可以使用第三方的html5播放器插件,百度一下很多的... 查看详情

像寻求拖动视频进度条这样的视频控件在 HTML 中不起作用?

】像寻求拖动视频进度条这样的视频控件在HTML中不起作用?【英文标题】:VideocontrolslikeseekdraggingvideoprogressbarisnotworkinginHTML?【发布时间】:2021-08-0400:12:11【问题描述】:像寻找10秒视频进度条拖动这样的视频控件在HTML中不起作... 查看详情

HTML5 视频进度滑块 [关闭]

...度滑块。所以我在页面上有视频,当你点击播放(无论是通过按钮还是视频本身)时,视频就会开始并更新进度条。我还想在进度条内放置一个图像,并使进度条可点击以跳过视频。任何想法如何使用Javascript做到这一点。我似... 查看详情

我如何用 pafy 为进度条制作线程

...使用线程模块,但我无法解决问题所以我该如何解决问题通过此代码,我可以下载视频并将数据发送到另一个函数,以检索我用来将其连接到进度条的信息def 查看详情

关于前端video标签视频无法拖动进度条快进问题(django)(代码片段)

因为后端返回的是视频的文件流,并不是视频文件地址。后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如GoogleChrome...)。django中常用返回文件流写法:classVideoAPIView(APIView):"""视频视图-... 查看详情

将视频加载到带有进度条的网页的最佳方法

】将视频加载到带有进度条的网页的最佳方法【英文标题】:Bestwaytoloadavideobeforeintoawebpagewithaprogressbar【发布时间】:2018-02-1904:36:30【问题描述】:我想在使用html5css和javascript的网站上播放大约30秒的视频。我想要的是确保在播... 查看详情

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

因为你的video的src不是直接使用视频文件的地址,而是通过后台接口返回文件流,后台返回流的时候没为response的header设置一些参数,否则会在部分浏览器有问题StringrangeString=request.getHeader("Range");//如果是video标签发起的请... 查看详情

opencv+qt实现简易视频播放器——支持进度条拖动(代码片段)

...deoCapture中的set函数,进度条则是使用Qslider;并且通过自定义新的进度条类实现点击跳转功能;效果:1.进行播放,线程循环读取视频帧并计数当前帧数,把Mat帧和当前帧数通过信号发送到窗口窗口中创建... 查看详情

制作进度条(uislider)

怎样判断是否应当使用进度条  用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种。  可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别... 查看详情

进度条与拖动条的使用学习(代码片段)

...视频播放的一条是当前播放进度,一条是缓冲进度,前者通过progress属性进行设置!对应的再Java中我们可调用下述方法:getMax():返回这个进度条的范围的上限getProgress():返回进度getSecondaryProgress():返回次要进度incrementProgressBy(... 查看详情

OpenCV-Python:如何从实时视频流中获取最新帧或跳过旧帧

】OpenCV-Python:如何从实时视频流中获取最新帧或跳过旧帧【英文标题】:OpenCV-Python:Howtogetlatestframefromthelivevideostreamorskipoldones【发布时间】:2017-12-3119:37:50【问题描述】:我已在Python中将IP摄像头与OpenCV集成,以便从实时流中逐... 查看详情

UITableView 拖动阻止所有其他动画

...14-05-1912:32:51【问题描述】:我有一个使用AVPlayer流式传输视频的应用程序。我在同一个视图上还有一个进度条和一个tableView。我遇到的问题是,当我在播放视频时拖动tableView时,播放器和进度条的动画/播放都会冻结。一旦滚动... 查看详情

easynvr录像回看进度条拖动回导致画面卡住不动是什么原因?

...;不仅可以调取录像视频直接回放,还可以将录像文件通过接口调用下载。有用户反馈在使用EasyNVR录像回看功能时,进度条偶尔会卡住。通过排查发现,是在使用时间轴功能时, 查看详情

javascript实现video视频进度条拖动无效

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

androidapp开发音量调节中实现拖动条和滑动条和音频管理器audiomanager讲解及实战(超详细附源码和演示视频)(代码片段)

...动操作改变进度值,在播放音频和视频时,用户通过拖动条控制播放器快进或快退到指定位置,然后从新位置开始播放,除此之外,拖动条还可以调节音量大小,屏幕亮度,字体大小等尽管拖动条在多... 查看详情

在线视频的进度条被锁定,缓冲都好了。就是不允许拖动。有啥方法可以破解

我需要在线看完这一集才能看下一集,所以把视频下载下来到本地看的方法不是我需要的,不在线看完我就完成不了任务,但是视频的进度条又禁止拖动!。参考技术A除了你是电脑高手,或者破解服务器,其他没有办法, 查看详情

ffmpeg+qt视频进度条控制——点击跳转和拖动跳转(代码片段)

...c;一是当前视频总时长,二是当前播放时长,需要通过FFmpeg转码成mp4文件才能获取相应的时长数据;往期回顾:【Qt+FFmpeg】视频转码详细流程_logani的博客-CSDN博客_qt+ffmpeg视频流【Qt+FFmpeg】编码视频详细流... 查看详情