鱼C论坛

 找回密码
 立即注册
查看: 2277|回复: 12

[奇技淫巧] 一个小技巧完转video元素倍速播放

[复制链接]
发表于 2019-4-22 13:56:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-17 18:56 编辑

Snip20190422_166.png


本讲主要是 video 元素的拓展,其属性我们就不讲了,自行参阅API速查宝典:传送门

如何实现上面图中的倍速播放呢?

video元素本身没有这个属性哈,所有只能 JS 了!

实现其实很简单,使用 playbackRate 属性控制就好啦。

完整叫法应该是 HTMLMediaElement.playbackRate,通过 video 元素调用。

用于实现让用户控制快放、慢放等。

正常播放速率乘以该值表示当前的播放速率,所以1.0表示一个正常的播放速率。

将 playbackRate 设为负值可以实现倒播哦,有兴趣的鱼油可以自行试一试。

言归正传,咱们来动手制作一个自带倍速播放的网页:
Snip20190422_167.png


视频就用放在服务器上专门用来测试的开场特效,基础代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="鱼C工作室|免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发|加密与解密|Linux教学">
  7.     <meta name="description" content="鱼C工作室为大家提供最有趣的编程视频教学。">
  8.     <meta name="author" content="鱼C工作室">
  9.     <title>鱼C-倍速播放</title>
  10. </head>
  11. <body>
  12. <video id="video" width="640" height="360" controls>
  13.     <source src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4"  type="video/mp4">
  14.     您的浏览器不支持 HTML5 video 标签。
  15. </video>
  16. </body>
  17. </html>
复制代码


这样 video 元素就加载好了。

再来创建下拉框:

  1. <p>鱼油选择播放速率:<select id="selRate">
  2.     <option value="0.5">0.5</option>
  3.     <option value="1" selected>1.0</option>
  4.     <option value="1.25">1.25</option>
  5.     <option value="1.5">1.5</option>
  6.     <option value="2">2.0</option>
  7. </select></p>
  8. <p><button id="btnPlay">播放</button></p>
复制代码


进入关键操作,创建JS:
  1. <script>
  2.     var eleSelect = document.getElementById('selRate');
  3.     var eleButton = document.getElementById('btnPlay');
  4.     // 视频元素
  5.     var video = document.getElementById('video');
  6.     // 改变播放速率
  7.     eleSelect.addEventListener('change', function () {
  8.         video.playbackRate = this.value;
  9.     });
  10.     // 点击播放按钮
  11.     eleButton.addEventListener('click', function () {
  12.         video.play();
  13.     });
  14. </script>
复制代码


核心部分就是:
  1.     // 改变播放速率
  2.     eleSelect.addEventListener('change', function () {
  3.         video.playbackRate = this.value;
  4.     });
复制代码


是不是超级简单呢?!这就是 HTML 的优势体现,之前 FLASH 时代这个功能实现起来就略显麻烦。

Apr-22-2019 14-22-43.gif


现在选择“播放速率”,单击“播放”,搞定!

在此基础上,稍微修改下就能增加很多好玩的功能:
暂停按钮,倒播,减速

欢迎下方留言,上传你的大作,让大家一起学习进步。

源代码(代码就是上面那些,鱼油可不用下载哦):
游客,如果您要查看本帖隐藏内容请回复






                               
登录/注册后可看大图


如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-22 19:21:42 | 显示全部楼层
在这个信息爆炸的时代,倍速播放时刚需
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-22 21:30:59 | 显示全部楼层
rrrrrr
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-22 21:45:20 From FishC Mobile | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-1-24 21:48:21 | 显示全部楼层
是怎么实现的?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-24 23:00:37 From FishC Mobile | 显示全部楼层
好熟悉,哔站的H5播放器
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-24 23:03:32 From FishC Mobile | 显示全部楼层
2.0倍速开启新世界
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-24 23:09:54 | 显示全部楼层
我爱鱼c
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-13 21:14:23 | 显示全部楼层
回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-28 20:35:24 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-4-7 08:04:48 | 显示全部楼层
谢谢分享。暂缺153。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-9-10 16:48:09 | 显示全部楼层
学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-12-21 23:23:43 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 00:20

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表