h5视频倍速播放功能(视频多倍速观看功能的实例)

h5视频倍速播放功能(视频多倍速观看功能的实例)

写倍速播放器代码的原理，采用的是video的playbackRate属性 ( playbackRate 属性设置或返回音频/视频的当前播放速度)。

主要代码：

<video id="video" width="180" height="314" autobuffer controls src="./sing-song.mp4" type="video/mp4"></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>

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();
});

倍数功能视频播放器的应用（参考效果）