马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 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 时代这个功能实现起来就略显麻烦。
现在选择“播放速率”，单击“播放”，搞定！
在此基础上，稍微修改下就能增加很多好玩的功能：
欢迎下方留言，上传你的大作，让大家一起学习进步。
源代码（代码就是上面那些，鱼油可不用下载哦）：
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-4-22 13:56:15
置顶卡
千斤顶
显身卡
发表于 2019-4-22 19:21:42
发表于 2019-4-22 21:30:59
