一个小技巧完转video元素倍速播放
本帖最后由 不二如是 于 2020-3-17 18:56 编辑本讲主要是 video 元素的拓展，其属性我们就不讲了，自行参阅API速查宝典：传送门
如何实现上面图中的倍速播放呢？
video元素本身没有这个属性哈，所有只能 JS 了！
实现其实很简单，使用 playbackRate 属性控制就好啦。
完整叫法应该是 HTMLMediaElement.playbackRate，通过 video 元素调用。
用于实现让用户控制快放、慢放等。
正常播放速率乘以该值表示当前的播放速率，所以1.0表示一个正常的播放速率。
将 playbackRate 设为负值可以实现倒播哦，有兴趣的鱼油可以自行试一试。
言归正传，咱们来动手制作一个自带倍速播放的网页：
视频就用放在服务器上专门用来测试的开场特效，基础代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="鱼C工作室|免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发|加密与解密|Linux教学">
<meta name="description" content="鱼C工作室为大家提供最有趣的编程视频教学。">
<meta name="author" content="鱼C工作室">
<title>鱼C-倍速播放</title>
</head>
<body>
<video id="video" width="640" height="360" controls>
<source src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4"type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
</body>
</html>
这样 video 元素就加载好了。
再来创建下拉框：
<p>鱼油选择播放速率：<select id="selRate">
<option value="0.5">0.5</option>
<option value="1" selected>1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="2">2.0</option>
</select></p>
<p><button id="btnPlay">播放</button></p>
进入关键操作，创建JS：
<script>
var eleSelect = document.getElementById('selRate');
var eleButton = document.getElementById('btnPlay');
// 视频元素
var video = document.getElementById('video');
// 改变播放速率
eleSelect.addEventListener('change', function () {
video.playbackRate = this.value;
});
// 点击播放按钮
eleButton.addEventListener('click', function () {
video.play();
});
</script>
核心部分就是：
// 改变播放速率
eleSelect.addEventListener('change', function () {
video.playbackRate = this.value;
});
是不是超级简单呢？！这就是 HTML 的优势体现，之前 FLASH 时代这个功能实现起来就略显麻烦。
现在选择“播放速率”，单击“播放”，搞定！
在此基础上，稍微修改下就能增加很多好玩的功能：
暂停按钮，倒播，减速
欢迎下方留言，上传你的大作，让大家一起学习进步。
源代码（代码就是上面那些，鱼油可不用下载哦）：**** Hidden Message *****
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 在这个信息爆炸的时代，倍速播放时刚需 rrrrrr 加油 是怎么实现的？ 好熟悉，哔站的H5播放器 2.0倍速开启新世界 我爱鱼c
回复 {:10_277:} 谢谢分享。暂缺153。 学习
1
页:
[1]