資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Video.js 播放器中建立影片迴圈？
Video.js 是一個知名的線上影片播放器 JavaScript 工具包，用於為各種影片格式建立 Web 瀏覽器影片播放器。Video.js 是一個非常靈活且可定製的庫，用於建立現代 Web 影片播放器。它支援各種軟體包、外掛和選項。使用 video.js，可以根據自己的喜好配置 HTML 影片播放器的任何部分。
在本教程中，我們將建立一個 Video.js 播放器中的影片迴圈，即重複播放影片。通常，迴圈影片是在影片完成後從開頭重新播放。讓我們繼續本教程的下一部分，瞭解如何使用 video.js 實現相同的功能。
在 Video.js 播放器中建立影片迴圈
為了在 Video.js 播放器中建立影片迴圈，我們需要使用 Video.js 預設提供的迴圈方法引用。只需設定布林值 true 或 false，即可切換此選項引用。如果傳遞布林值 true/false，迴圈方法將重複迴圈播放我們的影片。
迴圈方法引用可以以下列方式與我們的影片一起使用：
在 <video> 元素上使用迴圈屬性
在 <video> 標籤中使用 'data-setup' 內部的迴圈
使用 JS 動態設定迴圈
讓我們快速瀏覽一下上述所有方法。
在 <video> 元素上使用迴圈屬性
先決條件 - 假設您知道如何使用 Video.js 庫建立基本的影片播放器。
為了在我們的影片上啟用無縫迴圈，我們需要在 <video> 元素上將 'loop' 屬性設定為 true。請考慮以下程式碼片段以實現相同的功能。
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
muted="true"
loop="true"
autoplay="true"
poster=" https://tutorialspoint.tw/videos/sample.png"
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
在此程式碼片段中，我們在 <video> 元素上添加了 loop 屬性，並將其值設定為 true 以啟用無縫影片迴圈。此屬性將確保我們的影片在第一次結束時立即重新開始播放。
示例 1
帶有影片迴圈的完整影片播放器示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video Example</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
fluid="true"
controls="true"
muted="true"
loop="true"
autoplay="true"
poster="https://tutorialspoint.tw/videos/sample.png"
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
const player = videojs('my-video-player');
</script>
</body>
</html>
在此示例中，實現了以下內容：
首先，我們使用了免費的 CDN URL 將 Video.js 的所需 CSS 和 JS 檔案匯入到 HTML 程式碼的 <head> 部分。
接下來，我們在 <body> 部分內為我們的影片播放器建立了一個 <video> 元素，其中包含各種類，例如 'video.js vjs-default-skin vjs-big-play-centered' 和 'my-video-player' 作為影片 'id'。
此 id 已用於在下面的 <script> 標籤中引用影片播放器。我們還為 <video> 元素使用了一些標準的 HTML 影片選項，如 controls、muted、autoplay 和 poster。fluid 屬性也用於使影片播放器響應式。
在 <video> 元素上使用了 'Loop' 屬性來建立影片迴圈。
如果我們執行上述程式碼，它將在瀏覽器中建立一個影片播放器，該播放器將持續不斷地迴圈播放。影片結束後，它將從開頭重新開始播放。
現在我們已經學習了一種建立影片迴圈的方法，讓我們繼續本教程的下一部分，瞭解下一種方法。
在 <video> 標籤中使用 'Data-setup' 內部的迴圈
在本小節中，我們將使用 Video.js 的 'data-setup' 屬性內的迴圈選項引用。將 <video> 元素的 'data-setup' 屬性內的迴圈選項引用值設定為 true 將建立無限影片迴圈。
請考慮以下程式碼片段，以使用 'data-setup' 屬性在 Video.js 播放器中建立影片迴圈：
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster="https://tutorialspoint.tw/videos/sample.png"
data-setup='{"loop": true}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
正如您在上面的程式碼片段中注意到的那樣，我們在 <video> 元素的 'data-setup' 屬性中添加了一個迴圈選項。
由於 data-setup 屬性接受 JSON 物件，請確保您在 data-setup 屬性中傳遞有效的 JSON。
示例 2
在完整示例中使用上述程式碼片段來建立無縫影片迴圈將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video Example</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster="https://tutorialspoint.tw/videos/sample.png"
data-setup='{"loop": true}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
const player = videojs('my-video-player');
</script>
</body>
</html>
正如您在上面的示例中注意到的那樣，我們已從 <video> 元素中刪除了 loop 屬性，並將其作為 'data-setup' 屬性內的選項引用使用。
當您執行上述程式碼時，將建立一個影片播放器，該播放器將再次無限迴圈播放影片。
現在讓我們繼續討論最後一種方法，我們將使用 JavaScript 動態建立影片迴圈。
使用 JS 動態設定迴圈
在本教程的這一部分，我們將瞭解如何使用 JavaScript 動態設定迴圈方法。首先，我們需要建立一個包含布林值為 true 的迴圈屬性的“js”物件，然後將其傳遞給 Video.js 播放器初始化。
請考慮以下程式碼片段，以使用 JavaScript 在 Video.js 播放器中動態建立無限影片迴圈。
<script>
// setting loop option to true
let videoOptions = {
loop: true
}
// Initializing the video player with video options
var player = videojs('my-video-player', videoOptions);
</script>
在此程式碼片段中，我們在影片選項 JSON 物件中添加了 'loop' 選項，並將其值設定為 true。稍後，我們將其傳遞給影片播放器引用的初始化，該引用具有 'my-video-player' 作為 id。
示例 3
將上述程式碼片段新增到完整示例中將使程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video Example</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster=" https://tutorialspoint.tw/videos/sample.png"
data-setup='{}'
>
<source
src=" https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// setting loop option to true
let videoOptions = {
loop: true
}
// Initializing the video player with video options
var player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
如果您仔細觀察上面的示例，我們會發現已從 <video> 標籤的 'data-setup' 屬性中刪除了迴圈方法引用。相反，我們已在 <script> 標籤中動態地將該方法新增到我們的影片播放器中。
但是，當您在 Web 瀏覽器中執行上述程式碼時，將建立與上面示例中相同的影片播放器。並且就像上面的示例一樣，我們的影片將以無縫迴圈播放。因此，我們已成功地在 Video.js 播放器中建立了影片迴圈。
結論
在本教程中，我們瞭解瞭如何在 Video.js 播放器中建立無限影片迴圈。我們使用 3 種方法實現了相同的功能。首先，我們在 <video> 元素上使用了 'loop' 屬性。在第二種方法中，我們在 'data-setup' 屬性中傳遞了 'loop' 選項引用。最後，在最後一種方法中，我們將相同的選項引用設定為影片引用的選項。
1K+ 次觀看
