通过js代码控制浏览器视频倍速播放

最新推荐文章于 2024-04-01 14:44:41 发布
最新推荐文章于 2024-04-01 14:44:41 发布
阅读量5.4k 收藏 5
点赞数 8
分类专栏： # 大前端【细节】知识 文章标签： 浏览器视频 视频倍速
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42122355/article/details/111463453
版权

个人笔记：

  • 如标题，打开开发者工具，点击Element，找到并点击播放的视频标签，发现标签最后有一个$0的灰色标志。

  • 切换至console，输入$0.playbackRate=10

  • 后面的数字就是你要播放的倍速！！！

随后，播放的速度就会以你设定的速度播放！

5coder
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
【网页上视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何可继续播放】
Yxf11824的博客
01-28 3万+
网页上视频不支持拖动进度条并且无法加速播放时，如何进行加速播放 网页视频失焦后就停止播放，如何继续播放
Javascript添加监听与删除监听用法详解
10-25
主要介绍了Javascript添加监听与删除监听用法,较为详细的分析了javascript原理与用法,并补充说明了事件监听的兼容性问题,非常具有实用价值,需要的朋友可以参考下
类似b站视频x配速播放3倍速播放 代码及步骤
just_learing的博客
04-01 568
类似b站视频x配速播放代码及步骤
随意调节网页中 视频的播放速度
Xav Pun的博客
11-25 1万+
有些视频不提供倍速播放选项。不过没关系，只需要这一行文字就能够随意改变视频的速度。
JS控制视频播放或暂停
m0_68954642的博客
06-05 3246
【代码】JS控制视频播放或暂停。
JavaScript注册监听事件与清除监听事件
zhangawei123的博客
11-04 8462
JavaScript中有两种方法可以注册监听事件，一种是传统的注册方式，on+事件名称的注册方法，如btn.onclick,还有方法监听事件注册方式，addEventListener()和ie8以下的attachEvent()。
HTML5的Video标签的属性,方法和事件汇总
lxw1844912514的博客
05-26 1773
标签的属性 src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 html 代码 <<span class="hljs-title" style="color: ...
360浏览器倍速播放插件（学习事半功倍，附安装使用说明）
05-10
360浏览器倍速播放插件（学习事半功倍，附安装使用说明），适合所有需要在网站学习视频课程打卡的场景
谷歌网页视频倍速播放插件
01-09
更改大多数在线 Flash 和 HTML5 视频的播放速度 使用热键快速更改预设速度 快速切换正常、快、慢播放速度 显示您已节省的时间 通过社交媒体与其他人分享
video speed controller 谷歌浏览器视频倍速播放插件
05-19
可能只能在谷歌浏览器使用 解压rar后是一个.crx文件，打开谷歌浏览器，进入更多工具中的扩展程序界面，先打开开发者模式，再把.crx文件拖入当前界面，浏览器可识别直接安装就行。
安徽继续教育视频自动倍速播放
最新发布
04-25
安徽继续教育视频自动倍速播放 使用教程：https://blog.csdn.net/w1871331217/article/details/137766953
浏览器视频加速插件
03-14
添加到浏览器扩展工具中，可实现网页视频加速减速播放
html5 vedio 抓取,HTML5 js控制vedio视频和分段播放
weixin_36477469的博客
05-31 473
HTML5 vedio常用的js操作1、选择本地资源播放视频html:js:var myVid=document.getElementById("video1");function setMediaFile() {var file = document.getElementById('file').files[0];if(!file){alert("Please upload file.");re...
使用 JavaScript 控制 HTML5 视频播放器
ALEX__0805的专栏
06-11 6245
https://msdn.microsoft.com/zh-cn/library/hh924823 HTML5 video 对象提供可以用于通过 JavaScript 控制播放的方法、属性以及事件。 如何创建自己的按钮？我能播放这种格式吗？如何更改文件？出错了怎么办？我还可以对视频属性执行哪些操作？相关主题 通过向网页中添加 HTML5 视频控件中所述的 HT
利用JS控制插入视频的播放/暂停/快进等功能
weixin_49596018的博客
11-08 4020
利用JS控制插入视频的播放/暂停/快进等功能 1、页面样式 2、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt
浏览器在线视频播放加速方法——直接修改网页代码实现加速
热门推荐
珍惜的博客
02-26 20万+
现在有不少的视频网站，自带了播放加速的功能，例如油管、bilibili、慕课等等。 在一些付费的网站中，一些自带的播放器是不支持视频加速的，因为已经被加速惯坏，变得很不习惯，在网上查阅资料，也找到了在线视频的加速的解决方法，这边做一个记录。 一、html5播放器 主要标志是*&amp;amp;lt;video&amp;amp;gt;*标签，这种是最方便实现加速的，因为原生支持。 *defaultPlaybackRate...
一行代码实现任意网页视频配速播放
weixin_43627723的博客
12-28 611
网页右键选择==》检查 ==》进入控制台 在控制台下面输入 document. querySelector('video').playbackRate=几倍速 就完成配速播放惹~~~
突破网页页面视频播放速度限制
Jeromeyoung
03-13 2万+
突破网页页面视频播放速度限制 注：该方法用的是修改页面脚本代码突破html播放速度限制，有个缺陷就是不能直接跳多少秒，只能加快倍速。 大家不爽播放速度限制，所以现在分享一个方法。 准备东西：火狐浏览器或者其他浏览器，能装插件的浏览器。 安装插件：tampermokey：可以安装这个插件，我也给你们，自己导入浏览器就行： 链接：https://pan.baidu.com/s/1KweKDq...
浏览器设置视频播放0.5/2/3/4倍速的代码
阿酷tony
09-14 1万+
以谷歌浏览器为例：按键Ctrl−Shift−I，在console标签下，输入： 0.5倍速： document.getElementsByTagName("video")[0].playbackRate = 0.5 2倍速： document.getElementsByTagName("video")[0].playbackRate = 2 3倍速： document.getElementsByTagName("video")[0].playbackRate = 3 4倍速： doc
给我写一段代码，内容是网页视频倍速播放
05-19
以下是一段简单的 JavaScript 代码，可以让你的网页视频倍速播放： ``` javascript // 获取视频元素 const video = document.querySelector('video'); // 设置初始播放速度为1.0倍 let playbackRate = 1.0; // 获取倍速选择器元素 const speedSelector = document.querySelector('#speed-selector'); // 绑定倍速选择器的 change 事件 speedSelector.addEventListener('change', function() { // 获取选择的倍速值 const selectedSpeed = this.value; // 将播放速度设置为选择的倍速 video.playbackRate = selectedSpeed; // 更新当前播放速度 playbackRate = selectedSpeed; }); // 获取加速按钮元素 const speedUpButton = document.querySelector('#speed-up'); // 绑定加速按钮的 click 事件 speedUpButton.addEventListener('click', function() { // 将播放速度加快 0.25 倍 playbackRate += 0.25; // 将播放速度限制在 2.0 倍以内 playbackRate = Math.min(playbackRate, 2.0); // 将播放速度设置为新的值 video.playbackRate = playbackRate; // 更新倍速选择器的值 speedSelector.value = playbackRate; }); // 获取减速按钮元素 const slowDownButton = document.querySelector('#slow-down'); // 绑定减速按钮的 click 事件 slowDownButton.addEventListener('click', function() { // 将播放速度减慢 0.25 倍 playbackRate -= 0.25; // 将播放速度限制在 0.5 倍以内 playbackRate = Math.max(playbackRate, 0.5); // 将播放速度设置为新的值 video.playbackRate = playbackRate; // 更新倍速选择器的值 speedSelector.value = playbackRate; }); ``` 解释： 1. 首先，我们获取 `<video>` 元素，并将初始播放速度设置为 1.0 倍。 2. 然后，获取倍速选择器和加速、减速按钮的元素，并分别绑定它们的事件。 3. 当倍速选择器的值改变时，我们将播放速度设置为选择的倍速，并更新当前播放速度。 4. 当加速按钮被点击时，我们将当前播放速度加快 0.25 倍，并将播放速度限制在 2.0 倍以内。然后，将播放速度设置为新的值，并更新倍速选择器的值。 5. 当减速按钮被点击时，我们将当前播放速度减慢 0.25 倍，并将播放速度限制在 0.5 倍以内。然后，将播放速度设置为新的值，并更新倍速选择器的值。 你可以将这段代码添加到你的网页中，并根据需要进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

5coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值