如何使用 JavaScript 改變影片播放速度？-js教程-PHP中文網

首頁

web前端

js教程

如何使用 JavaScript 改變影片播放速度？

王林

Aug 26, 2023 am 10:05 AM

如何使用 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 id="TutorialsPoint-Sample-Video">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。

價值

描述

播放速度

顯示音訊或影片的速度目前正在播放。

情況值的類型 -

通常的速度為 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 id="TutorialsPoint-Sample-Video">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。

以上是如何使用 JavaScript 改變影片播放速度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。