Html5播放器实现倍速播放的方法示例

铁锅炖大鹅

定义和用法

playbackRate 属性设置或返回音频的当前播放速度。

playbackspeed

指示音频的当前播放速度。             例值：                              1.0 正常速度                0.5 半速（更慢）                2.0 倍速（更快）                -1.0 向后，正常速度                -0.5 向后，半速

示例代码1：

代码示例：

1. <video id="video" controls src="**.mp4" type="video/mp4"></video>
   
2. 选择倍速播放：
   
3. <select id="select">
   
4.     <option value="0.5">0.5</option>
   
5.     <option value="1" selected>1.0</option>
   
6.     <option value="1.25">1.25</option>
   
7.     <option value="1.5">1.5</option>
   
8.     <option value="2">2.0</option>
   
9. </select>

复制代码

1. var select = document.getElementById('select');
   
2. var video = document.getElementById('video');
   
3. select.addEventListener('change', function () {
   
4.     video.playbackRate = this.value;
   
5. })

复制代码

示例2：

应用倍速实例。

1. <div id="player"></div>
   
2. <script src="//player.polyv.net/script/player.js"></script>
   
3. <script>
   
4. var player = polyvPlayer({
   
5. wrap: '#player',
   
6. width: 800,
   
7. height: 533,
   
8. vid: 'e785b2c81c9e018296671a1287e99615_e',
   
9. });
   
10. </script>

复制代码

speed

boolean/array

[2, 1.5, 1.2, 0.5]

设置为false则关闭倍速，可传入数组自定义显示哪几种倍速，速率1不需要填入，会自动添加，所设置速率值必须大于0，少于或等于3，最多设置6种速率（不包含1），所设置值会按由大到小自动排序

设置倍速代码如下：

1. <div id="player"></div>
   
2. <script src="//player.polyv.net/script/player.js"></script>
   
3. <script>
   
4. var player = polyvPlayer({
   
5. wrap: '#player',
   
6. width: 800,
   
7. height: 533,
   
8. speed：[2, 1.5, 1.2, 0.5], //倍速播放参数设定值
   
9. vid: 'e785b2c81c9e018296671a1287e99615_e',
   
10. });
    
11. </script><font face="Tahoma"><span style="white-space: normal;"> </span></font>

复制代码

到此这篇关于Html5播放器实现倍速播放的方法示例的文章就介绍到这了,更多相关Html5倍速播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

海卜wave

谢谢你的提醒，我会注意的。

阿蒙

说得太好了，完全同意！

醉眼朦胧哀叹

让我们一起努力

不可以那里脏

太棒了！感谢分享这个信息！

孟夏不吃饭

说得太好了，完全同意！

戏子自

嘎嘎嘎嘎嘎嘎嘎

季媛

我不确定这个信息的准确性，请再确认一下

用户3ua4lhh

顶一个，观点非常中肯！

越过913

每日一回