資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 Video.js 播放器中加快/減慢影片速度？
在本教程中，我們將學習如何使用 video.js 加快或減慢影片速度。Video.js 是一個廣泛使用的開源 HTML5 影片播放器框架。它允許在各種平臺（例如臺式電腦和移動裝置）的不同螢幕尺寸上播放影片。該專案始於 2010 年中期，目前已有數百名貢獻者，並在超過 450,000 個網站上使用。除此之外，Video.js 還提供了多種選項，可根據您的喜好更改和自定義影片播放器。
在本教程中，我們將透過 video.js 加快和減慢影片速度來自定義我們的影片播放器。加快和減慢速度是一個非常重要的功能，在許多情況下都非常有用，使用者需要更改影片速度。在我們的影片播放器中提供增加或減少影片速度的選項將真正增強使用者體驗。因此，請在下一節中學習如何在 video.js 中更改影片速度。
如何在 Video.js 播放器中加快/減慢影片速度？
在本教程的這一部分中，我們將瞭解如何在 video.js 中新增一個按鈕來更改影片的播放速度。每當終端使用者選擇一個速度時，我們的影片也會以該速度播放。
先決條件 - 假設您知道如何使用 video.js 庫建立基本的影片播放器。
為了更改影片的速度，我們將使用一個名為“playbackRates”的方法，這是 video.js 獨有的預設方法。我們需要將速度倍數傳遞給此方法，其餘所有內容都將由 video.js 自行處理。
例如，如果我們傳遞值 1.5，則當從影片播放器中選擇此速度時，我們的影片將以 1.5 倍的速度播放；同樣，如果選擇的值為 0.5，則我們的影片將以半速 (50%) 播放。
現在，我們已經瞭解了 playbackRates，要在原生代碼中使用此方法，我們有兩個選項。我們可以將其用於“data-setup”屬性內，也可以將其作為影片選項傳遞給我們的影片播放器引用。讓我們藉助示例瞭解這兩種方法。
在 HTML 中使用“data-setup”中的 playbackRates
我們需要將 playbackRates 陣列傳遞到我們<video>元素的 data-setup 屬性中。請考慮以下程式碼片段，用於向我們的影片新增播放速度控制器。
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
preload="auto"
width="1280"
height="720"
data-setup='{"playbackRates": [0.25, 0.5, 1, 1.5, 2]}'
>
如您所見，我們在“data-setup”屬性中添加了包含 5 個值（即 0.25、0.5、1、1.5、2）的 playbackRates 陣列。選擇任何值都會加快或減慢影片的速度。如果選擇的值是 0.25x，則影片速度將降至 25%；如果選擇的值是 2x，則影片速度將加快至 200%。
您可以向 playbackRates 陣列傳遞任意多個值，但請確保所有值都嚴格大於 0，即值必須始終為正。
要加快影片速度，請向陣列傳遞大於 1 的值，例如 1.5、2、2.5 等。同樣，要減慢影片速度，請傳遞 0 和 1 之間的值，例如 0.25、0.5、0.75 等。
示例 1
在我們的影片播放器中新增影片速度控制器後，完整的程式碼示例將如下所示。
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Speed Up/Down Video Tutorial</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script
src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
preload="auto"
width="560"
height="340"
data-setup='{"playbackRates": [0.25, 0.5, 1, 1.5, 2]}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
var player = videojs('my-video');
</script>
</body>
</html>
在上面的程式碼中，我們執行了以下操作：
首先，我們使用 CDN URL 在<head>標籤中匯入了 video.js CSS 和 js 檔案。
然後，在<body>標籤內，我們建立了一個<video>元素，其類為“video.js vjs-default-skin vjs-big-play-centered”，ID 為“my-video”。我們在下面的<script>標籤中使用了此 ID 來引用播放器。我們還添加了一些標準的 HTML 影片選項，例如 controls、muted、autoplay、width、height 等。
在<video>標籤的“data-setup”屬性中，我們傳遞了 playbackRates 陣列，該陣列負責在我們的影片中新增影片速度控制器。
執行上述程式碼後，將在我們的 Web 瀏覽器中建立一個影片播放器，其控制欄中將有一個按鈕，其中包含 2x、1.5x、1x、0.5 和 0.25x 等選項。選擇大於 1 的值 (1.5x 或 2x) 將加快影片速度，而點選 0 和 1 之間的值 (0.5x 和 0.25x) 將減慢影片速度。
現在，讓我們學習如何在教程的後續部分中使用 JavaScript 中的 video 選項方法來實現相同的功能。
在 JavaScript 中使用 video 選項中的 playbackRates
為了使用 JavaScript 在我們的影片播放器中實現相同的影片播放速度控制器，我們需要建立一個包含 playbackRates 陣列的 JS 物件，然後將其傳遞給 video.js 播放器引用。
請考慮以下程式碼片段，該片段演示如何使用 JavaScript 動態地向我們的影片播放器新增速度控制器。
<script>
// Adding playbackRates to options
let videoOptions = {
"playbackRates": [0.25, 0.5, 1, 1.5, 2]
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
在上面的程式碼片段中，我們在 videoOptions 物件中添加了包含 5 個不同速度值的 playbackRates 陣列，並將其傳遞給 ID 為“my-video”的影片播放器的初始化。
示例 2
將程式碼片段新增到上面的示例中將使程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Speed Up/Down Video Tutorial</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js">
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
preload="auto"
width="560"
height="340"
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Adding playbackRates to options
let videoOptions = {
"playbackRates": [0.25, 0.5, 1, 1.5, 2]
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
如果您仔細檢視上面的示例，我們會發現我們已從<video>標籤的“data-setup”屬性中刪除了 playbackRates。相反，我們在<script>標籤中動態地將 playbackRates 新增為 video 選項。
但是，當您在 Web 瀏覽器中執行上述程式碼時，將建立與上述示例相同的影片播放器。它將具有相同的 5 個速度倍數，即 0.25x、0.5、1x、1.5x 和 2x。選擇任何倍數都會相應地加快或減慢影片速度。理想情況下，這兩種方法都提供相同的功能，但呼叫函式是唯一的區別。“datasetup”在程式碼的 HTML 部分完成，而“videoOptions”在 js 部分完成。因此，使用上述任何一種方法，您都可以加快或減慢 video.js 播放器中的影片速度。
結論
在本教程中，我們學習瞭如何使用 video.js 加快或減慢影片速度。我們使用了 video.js 原生提供的 playbackRates 方法來實現相同的功能。稍後，我們透過每個方法的示例展示了兩種使用 playbackRates 方法的方法。
1000+ 次瀏覽
