Html5播放器如何实现倍速播放

定义和用法

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

playbackspeed

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

示例代码1：

代码示例：

<video id="video" controls src="**.mp4" type="video/mp4"></video>
选择倍速播放：
<select id="select">
    <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>

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

示例2：

应用倍速实例。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

speed

boolean/array

[2, 1.5, 1.2, 0.5]

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

 设置倍速代码如下：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
speed：[2, 1.5, 1.2, 0.5], //倍速播放参数设定值
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

图1-1：倍速播放效果

图1-2：倍速播放效果

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

• 教育教学类视频如何处理加密与安全（组图）
• 防止360浏览器小窗下载视频
• 视频安全之视频播放密码功能(设置观看密码功能教程)
• 视频安全之授权播放和防录屏跑马灯
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 在线教育网站如何更好的实现视频安全视频保护？
• 免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• Html5视频video标签中使用blob实现视频播放加密

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

• 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
• 视频直播画中画效果（边角叠加、去背景、并列布局三种效果）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• 在线导播台（网页导播台）混流效果
• 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
• 微信公众号直播有哪些不一样的玩法？
• 企业年会活动常用的音频类、视频类工具软件