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

javascriptjavascript 2023-08-28 05:52:04 664
摘要： 在本文中，我们将了解如何使用HTML5视频标签来改变视频的播放速度嵌入在HTML文档中。小于1的数字会减慢视频速度，大于1的数字会加速视频，然后数字1会使视频恢复到原来的速度。另请注意，playbackRate是一个属...

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

在本文中，我们将了解如何使用 HTML5 视频标签来改变视频的播放速度 嵌入在 HTML 文档中。

小于 1 的数字会减慢视频速度，大于 1 的数字会加速视频，然后 数字 1 会使视频恢复到原来的速度。另请注意，playbackRate 是一个属性 而不是 HTML 属性。

尽管您不想更改每个视频网站的播放速率，但如果您愿意，也可以这样做 认为您的访客会更喜欢它。这只需要一个 HTML 元素设置！

PlaybackRate 属性允许我们更改播放速度。这些是它的语法规则。

语法

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

通过使用defaultPlaybackRate参数，用户可以轻松修改默认播放速度。它 使用下面列出的语法。

语法

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

示例 1

<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      body {
         text-align: center;
         margin-top: 5%;
      }
      h1 {
         color: rgb(3, 95, 121);
      }
      p {
         margin-top: 5%;
      }
      button {
         margin-right: 20px;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint Sample Video</h1><br>
   <video width="420" height="240" controls loop>
      <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      The video tag is incompatible with your browser.
   </video>
   <p>
      <button type="button" class="btn btn-primary" onclick="speedUp()"> Speed Up</button>
      <button type="button" class="btn btn-primary" onclick="speedDown()"> Speed Down</button>
   </p>
   <script>
      let video = document.querySelector('video');
      
      // Make the playing speed the default
      video.defaultPlaybackRate = 0.5
      
      // The video is loaded after setting
      video.load();
      function speedUp() {
         
         // The playback speed has been increased by 1
         video.playbackRate += 1;
      }
      function speedDown() {
         
         // The playback speed has been decreased by 1
         if (video.playbackRate > 1)
            video.playbackRate -= 1;
      }
   </script>
</body>
</html>

示例 2

音频或视频的播放速度通过playbackRate属性设置或返回。

属性的值

价值 描述 播放速度

显示音频或视频的速度 当前正在播放。

情况值的类型 -

  • 通常的速度为 1.0。
  • 半速为 0.5。 （较慢）
  • 2.0 的速度是原来的两倍（更快）
  • 向后为 -1.0 且正常速度
  • 后退半速为-0.5。

HTML 音频/视频 DOM 的 playbackRate 属性

播放速度是多少？

媒体根据playbackRate 属性以定义的速率播放。有了这个，用户 实现了快进、慢动作和其他功能的控制。值为 1.0 表示 标准速度，通过将当前速率乘以通常的播放速率来计算。

什么播放速度是完美的？

大多数浏览器会在播放之外暂停音频 视频的速率限制为 0.5 和 4 播放无声。对于大多数情况，您应该将范围保持在 0.5 到 4 之间 应用程序。

<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      body {
         text-align: center;
         margin-top: 5%;
      }
      h1 {
         color: rgb(3, 95, 121);
      }
      button {
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint Sample Video</h1><br>
   <video id="myVideo" width="420" height="240" controls>
      <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      HTML5 video is not compatible with your browser.
   </video>
   <br>
   <button type="button" class="btn btn-primary" onclick="getSpeed()" type="button">Get Frequency of playback</button>
   <button type="button" class="btn btn-primary" onclick="setSpeed()" type="button">Slow motion video</button><br>
   <script>
      let demoVideo = document.getElementById("myVideo");

      function getSpeed() {
         alert(demoVideo.playbackRate);
      }
      function setSpeed() {
         demoVideo.playbackRate = 0.5;
      }
   </script>
</body>
</html>

点击“获取播放频率”按钮后，您将看到以下屏幕。

此外，单击“慢动作视频”按钮，然后单击“获取”后，您将在屏幕下方看到他 播放频率”按钮。

简介

在上面的示例中，变量（本例中为 demoVideo）用于更改播放速度（或 任何我们想做的事情）。例如，只需输入 demoVideo 并将playbackRate 更改为 2 以两倍的速度跑步。 playbackRate 等于 2。

所有这一切的结论。当您按下“播放”时，该视频的播放速度将是原来的两倍 通常。您喜欢它以半速运行吗？相反，将playbackRate 设置为0.5。想让它恢复 以正常速度运行？基本上，将playbackRate 设置为1。

标签：