揭秘（爱奇艺，优酷，腾讯）视频网站视频2倍速，多速快速回放的前端实现方法

B站或腾讯视频等主流视频网站现在支持双速播放.

此功能对于当今快节奏的生活非常有用，因为夸张是为了延长我们的寿命，哈哈哈.

对于依赖技术的人来说，不可避免地将重点放在技术实施上. 如何实现的？看着〜

Dangdang当当，实际上实现起来非常简单优酷如何倍速播放视频，只需使用playingRate属性对其进行控制即可.

playbackRate属性是可读写的属性，用于控制音频和视频的播放速率.

语法如下:

// 视频获取速率
var videoSpeed = video.playbackRate;
// 视频设置播放速率，如正常速度播放
video.playbackRate = 1.0;
// 获取音频播放速率
var audioSpeed = audio.playbackRate;
// 音频设置播放速率，如正常速度播放
audio.playbackRate = 1.0;

您可以激烈地单击此处: HTML5视频视频播放以两倍的速度进行演示播放

例如，我们下拉选择2.0x速度，然后单击下面的播放按钮:

您可以看到泥土视频的效果.

相关代码如下:

var select = document.querySelector('select');
var button = document.querySelector('button');
// 视频元素
var video = document.querySelector('video');
// 改变播放速率
select.addEventListener('change', function () {
    video.playbackRate = this.value;
});
// 点击播放按钮
button.addEventListener('click', function () {
    video.play();
});

实际上，关键代码是以下行:

video.playbackRate = this.value;

它比您想象的简单吗？

双速播放是HTML5视频视频播放的自然支持功能. 因此，视频网站通常仅在HTML5视频播放器中支持双倍速播放. 传统的Flash播放器不具备此功能，例如爱奇艺视频:

这种流行病很严重优酷如何倍速播放视频，每个人都注意安全，一个小技巧，希望您能有所收获.

感谢阅读，欢迎交流！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-170030-1.html