在 HTML5 中，使用 <video> 标签来嵌入视频是很常见的。它允许开发者轻松地将视频嵌入到网页中，并且可以使用 JavaScript 控制视频的播放。
有时候，我们需要调整视频的播放速度以适应不同的需求。本文将介绍如何使用 JavaScript 改变 HTML5 视频的播放速度。
基础知识
在开始之前，我们需要了解一些基本的知识。
playbackRate 属性
在 HTML5 中，<video> 元素有一个 playbackRate 属性，它用于设置视频的播放速度。这个属性的默认值为 1，表示正常速度。如果将它设置为 2，则视频会以两倍的速度播放；如果将它设置为 0.5，则视频会以一半的速度播放。
currentTime 属性
currentTime 属性用于获取或设置视频的当前播放位置。它的单位是秒。
play() 和 pause() 方法
play() 和 pause() 方法用于控制视频的播放和暂停。当调用 play() 方法时，视频会开始播放；当调用 pause() 方法时，视频会暂停播放。
改变播放速度
现在，我们来看看如何改变视频的播放速度。
获取视频元素
首先，我们需要获取 <video> 元素。我们可以使用 document.getElementById() 方法获取元素，如下所示：
const video = document.getElementById('my-video');其中，my-video 是 <video> 元素的 id。
改变播放速度
要改变视频的播放速度，我们只需要将 playbackRate 属性设置为所需的值即可。例如，如果要将播放速度设置为 2 倍，可以这样写：
video.playbackRate = 2;
调整当前播放位置
如果在改变播放速度的同时，还需要调整当前播放位置，可以使用 currentTime 属性。例如，如果要将当前播放位置设置为视频的第 10 秒钟，可以这样写：
video.currentTime = 10;
完整示例代码
下面是一个完整的示例代码，它将播放速度设置为 2 倍，并将当前播放位置设置为视频的第 10 秒钟：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ----- -------- ------------ ------- ------ ------- ------------- ----------- ------------ --------- - ------- ------------------ ----------------- --------- --------- ------- ----- - ------------------------------------ -------------------- - -- ------------------- - --- --------------- ---------- ------- -------
总结
通过设置 playbackRate 属性，我们可以轻松地改变 HTML5 视频的播放速度。同时，使用 currentTime 属性可以调整视频的当前播放位置。这对于需要快速浏览视频或者慢动作观看视频的场景非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12478