如何使用JavaScript更改视频播放速度

在本文中，我们将看到如何通过使用HTML5视频标签嵌入到HTML文档中的视频来更改其 播放速度 。

我们可以使用 playbackRate 属性设置新的播放速度。其语法如下。

语法：

let video = document.querySelector('video')
video.playbackRate = newPlaybackRate

我们也可以使用 defaultPlaybackRate 属性来设置默认的播放速度。其语法如下。

语法：

let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()

例子： 这个例子展示了使用Javascript更改播放速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>使用JavaScript更改视频播放速度</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <video width="890" height="500" controls loop>
        <source src="sample.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
  
    <p>
        <button onclick="increase()">增加速度</button>
        <button onclick="decrease()">减少速度</button>
    </p>
</body>
</html>

<style>body {
    text-align: center;
    margin-top: 2%;
}
  
h1 {
    color: green;
}
  
p {
    margin-top: 2%;
}
  
button {
    margin-right: 20px;
}
  
</style>

<script>
    let video = document.querySelector('video');
      
    // 设置默认播放速度
    video.defaultPlaybackRate = 0.5
      
    // 设置完后再加载视频
    video.load();
      
    function increase() {
      
        // 增加播放速度1
        video.playbackRate += 1;
    }
      
    function decrease() {
      
        // 减少播放速度1
        if (video.playbackRate > 1)
            video.playbackRate -= 1;
    }
</script>

输出： 点击这里查看实时输出

如何使用JavaScript更改视频播放速度