JavaScript 如何改变视频播放速度

在本文中，我们将学习如何使用HTML5 video标签在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>change video playing speed using JavaScript</title> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <video width="890" height="500" controls loop> 
        <source src="sample.mp4" type="video/mp4"> 
        Your browser does not support the video tag. 
    </video> 
  
    <p> 
        <button onclick="increase()">Increase Speed</button> 
        <button onclick="decrease()">Decrease Speed</button> 
    </p> 
</body> 
</html>

CSS代码

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

JavaScript代码

<script> 
    let video = document.querySelector('video'); 
      
    // Set the default playing speed 
    video.defaultPlaybackRate = 0.5 
      
    // Loading the video after setting  
    video.load(); 
      
    function increase() { 
      
        // Increasing the playing speed by 1 
        video.playbackRate += 1; 
    } 
      
    function decrease() { 
      
        // Decreasing the playing speed by 1 
        if (video.playbackRate > 1) 
            video.playbackRate -= 1; 
    } 
</script>

输出：

JavaScript 如何改变视频播放速度