浏览器设置视频播放0.5/2/3/4倍速的代码

最新推荐文章于 2024-03-04 18:31:23 发布
最新推荐文章于 2024-03-04 18:31:23 发布
阅读量1.7w 收藏 26
点赞数 2
分类专栏： html5 视频应用专栏 文章标签： 视频倍速播放 0.5倍速播放 3倍速播放 4倍速播放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffffffff8/article/details/120280187
版权

浏览器设置视频播放0.5/2/3/4倍速的代码，通常web站点，最高倍速是2倍速，最低是0.5倍速，那如何按自己的需求设倍速呢？设0.2倍速、4倍速、10倍速？ OK，也是可以的。

以谷歌浏览器为例：按键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倍速：

document.getElementsByTagName("video")[0].playbackRate = 4

html5倍速播放

 买1送1，附相关h5写法，在html5中使用代码实现倍速播放：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿酷TONY--Tangni</title>
</head>
<body>
<div style="text-align:center">
  <button οnclick="playPause()">播放/暂停</button>
  <button οnclick="makeBig()">放大</button>
  <button οnclick="makeSmall()">缩小</button>
  <button οnclick="makeNormal()">普通</button>
  <button οnclick="getPlaySpeed()" type="button">当前播放速度</button>
  <button οnclick="setPlaySpeed()" type="button">将视频设定为2倍播放速度</button>
  <br>
  <video id="video" width="600" autoplay controls>
    <source src="test.mp4" type="video/mp4">
    TONY提示：您浏览器不支持 HTML5 video 标签。 </video>
</div>
<script> 
var myVideo=document.getElementById("video"); 
function getPlaySpeed() {
    alert("当前视频播放速度为："+myVideo.playbackRate);//获取播放速度
    }
function setPlaySpeed()  { 
    alert("视频将以2倍速度播放");//获取播放速度
    myVideo.playbackRate=2;//设定新的播放速度2倍速度
    } 
function playPause(){ 
    if (myVideo.paused) 
      myVideo.play(); //播放
    else 
      myVideo.pause(); //暂停播放
    } 
function makeBig(){ 
    myVideo.width=660; 
    } 
function makeSmall(){ 
    myVideo.width=230; 
    } 
function makeNormal(){ 
    myVideo.width=400; 
    } 
</script>
</body>
</html>

 [ 视频安全 ] 相关原创文章

[ 视频直播 ] 相关原创文章

[ 视频存储与应用 ] 相关原创文章

[ 视频播放器 ] 相关文章

[ WebRTC ] 相关文章

[ 谷歌浏览器 ] 相关文章

[ 微信公众号运营 ] 相关文章

阿酷tony
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
NEC电子推出高速系统芯片SCOMBO/UM2A
11-19
NEC电子日前完成了新产品"SCOMBO?/UM2A"系统芯片的开发，全球首次将蓝光影碟机的前端伺服主要功能集于一颗芯片上，并将于即日起开始发售样品。 　　该新产品是一款适用于可支持蓝光光盘和DVD光盘的电脑光驱以及家用录放机的内置系统芯片。其最大优势在于：　　（1）该产品是全球首次将控制激光头的模拟信号处理电路数字化，并将进行数据调制解调及误码纠正的数字信号处理电路集成于一颗芯片上；（2）实现了全球最高水平的刻录播放速率--支持蓝光8倍速；（3）实现了单芯片化，使封装面积缩小20％，耗电量降低33％。 　　此外，NEC电子还推出适用于家用蓝光播放机的"SCOMBO/UM2P"，支持蓝光5倍
西门子SMART200PLC输送线/倍速线实例
09-29
主要用于小型的输送线/倍速线，通过光电开关的反馈，简单控制电磁阀气缸，适用于新手或者想了解输送线/倍速线的看客们。
【计算机学习】-- 网页视频加速
最新发布
用余生去守护的博客
03-04 1213
消除焦虑的方法就是让自己忙碌起来，做任何一切有意义的事
video speed controller 谷歌浏览器视频倍速播放插件
05-19
可能只能在谷歌浏览器使用 解压rar后是一个.crx文件，打开谷歌浏览器，进入更多工具中的扩展程序界面，先打开开发者模式，再把.crx文件拖入当前界面，浏览器可识别直接安装就行。
Alook浏览器安卓版 v8.0.0 支持视频播放16倍速的浏览器
05-21
Alook浏览器安卓版支持视频播放8/16倍速的手机浏览器APP软件。Alook浏览器安卓版无推送，无新闻，无广告，毫秒级启动。音/视频悬浮，8倍速（支持0.5-16.0），分享链接，后台播放，AirPlay，小窗播放，单曲循环 ，画中画…内置Adblock Plus，可选多语言规则和第三方规则，支持手动编辑标记广告，自动屏蔽侵入式广告。文件管理支持手动下载，解压和压缩(zip, rar 和 7z)，支持加密解压和压缩，新建/编辑文件，纯文本方式打开文件，文件选择编码，从相册导入视频和图片，移动和复制文件，Wi-Fi传输…全格式电子书阅读器（txt, pdf, epub, kindle, mobi, azw, azw3, azw4, prc, pdb）JavaScript扩展，在网页上运行自己的JS代码。自定义沉浸式壁纸，站点图标，网站主页，搜索引擎，浏览器标识（User-Agent）。
360浏览器倍速播放插件（学习事半功倍，附安装使用说明）
05-10
360浏览器倍速播放插件（学习事半功倍，附安装使用说明），适合所有需要在网站学习视频课程打卡的场景
【日常科普】浏览器网页视频自定义倍速播放（无需任何插件）
热门推荐
九芒星的博客
03-23 2万+
网页视频倍速播放前言一、步骤二、最终效果 前言 你想花最少的时间追最多的剧吗？你嫌弃过3倍速追剧刷课慢吗？ 三秒钟教你任意倍速观看网页视频 一、步骤 网页空白处右键，选择“检查”/“审查元素”（浏览器不同名称有区别） 选择控制台（concole） 输入下面这行代码（最后数字为真实倍速） document.querySelector('video').playbackRate = 3.0; 回车运行 二、最终效果 自定义倍速效果如下，为了效果明显设置10倍速播放，可自行调节观看速度。 温馨提示：
javascript视频倍速播放
HYS_10_01的博客
05-22 8482
javascript视频倍速播放
设置网页视频播放倍速
wcy1900353090的博客
12-11 1万+
设置网页视频播放倍速 网页视频课程不让倍速快进怎么办？
在线观看视频--使用代码倍速播放
小北风的博客
11-26 1万+
有些在线播放的视频没有倍速播放按钮，这时又想倍速看，怎么办呢？ 此时我们需要使用在网页的控制台写几句简单的代码就能完成倍速播放。步骤如下： s1：浏览器右键–检查，或者使用快捷键F12，找到控制台，即console s2：然后输入以下代码，后回车 ```javascript document.querySelector('video').defaultPlaybackRate = 2.0;//默认两倍速播放 document.querySelector('video').play(); /* now
哔哩哔哩 B站 bilibili 视频倍速设置 视频倍速可自定义
c_lanxiaofang的博客
08-27 2520
该代码用于设置倍速为3，最后的数值是多少就是多少倍速，可以带小数点，注意小数点符号正确即可（小贴士：如果是第一次操作的朋友浏览器处于安全考虑会有提示输入 allow pas...再允许粘贴代码是正常的 ）2、进入控制台方式二：还可以 在视频播放页的空白处 鼠标右键点击。1、进入控制台方式一：可以 按键盘。再在出现的调试中选择控制台。
利用HTML和浏览器16倍速刷网课
网易独家音乐人Mike Zhou的博客
06-21 1万+
利用HTML和浏览器16倍速刷网课
【工具】JS脚本｜网页任意视频倍速播放（包括MOOC、本地视频、其他的视频）
qq_46106285的博客
12-14 4835
支持PC端浏览器任意页面视频倍速播放、调整进度、调整音量。
JS设置视频播放速度,加速网课视频小技巧
0
08-31 2770
进入到要加速的视频页面按F12打开控制控制台输入代码并回车。
网页控制台控制视频倍速
qq_43500084的博客
11-17 1万+
小伙伴们是否在某些网站看课程视频或刷网课视频，默认没有倍速观看，看得很慢，那今天我们就来看看通过网页控制台来操控视频倍数吧！
简易的html5视频播放倍速代码写法
阿酷tony
03-17 8405
HTML5视频标签有一个叫做playbackRate的属性，用于设置倍速播放。例如设置播放速度为2倍，可以写成
Html5播放器如何实现倍速播放
阿酷tony
11-03 4629
设置为false则关闭倍速，可传入数组自定义显示哪几种倍速，速率1不需要填入，会自动添加，所设置速率值必须大于0，少于或等于3，最多设置6种速率（不包含1），所设置值会按由大到小自动排序
【B站】高倍数播放代码-学习视频高效方法
weixin_44002043的博客
11-18 1229
var changeSpeed = document.querySelector('.bilibili-player-video-btn-speed-menu-list'); changeSpeed.setAttribute('data-value',3);// 这里设置需要的倍数 changeSpeed.click(); 在console中进行将以上代码copy运行即可搞倍数播放～
html5网页播放器视频切换、倍速切换、视频预览的代码实例
阿酷tony
05-22 3824
本文将对视频播放相关的功能进行说明，包括初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等
给我写一段代码，内容是网页视频倍速播放
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 倍以内。然后，将播放速度设置为新的值，并更新倍速选择器的值。 你可以将这段代码添加到你的网页中，并根据需要进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值