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

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

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

主要代码：

选择播放速率：

0.5

1.0

1.25

1.5

2.0

视频播放

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

});

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