資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 video.js 播放器中從特定時間播放影片？
在本教程中，我們將學習如何在 video.js 播放器中從特定時間播放影片。Video.js 是一個知名且廣泛使用的開源 HTML5 影片播放器。它使您能夠為各種影片格式開發影片播放器，包括傳統的影片格式（如 mp4、WebM、Flv 等）以及當前的影片播放格式（如 YouTube、Vimeo 和 Twitch）。
因此，在本教程中，我們將從特定時間在 video.js 播放器中播放影片。從特定時間開始或播放影片有很多應用，例如從特定時間共享影片。現在讓我們瞭解如何在教程的下一部分中更改影片播放器的起始位置。
在 video.js 播放器中從特定時間播放影片
為了在 video.js 播放器中從特定時間播放影片，我們將使用 video 播放器的名為“currentTime”的方法引用。此方法預設情況下僅由 video.js 公開。
“currentTime”方法將數值作為輸入引數，並跳過從影片開始算起的這些秒數，以便從特定時間開始播放我們的影片。此外，此選項將字串引用作為輸入值，並將我們的影片時間更改為傳遞的值，前提是該值是有效的秒數時間。例如，如果我們希望從第 30 秒而不是第 0 秒開始播放影片，我們可以將值 30 作為引數傳遞給 currentTime 方法。
先決條件 - 假設您知道如何建立影片播放器以及 video.js 庫的基本用法。
請考慮以下程式碼片段，用於在 video.js 播放器中從特定時間（對於我們的案例為 30 秒）播放影片：
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime(30);
</script>
正如您在上面的程式碼示例中注意到的，我們的影片播放器將 id 設定為“my-video-player”並已初始化，然後我們透過將其作為數字輸入引數傳遞給 currentTime 方法，將影片播放器的初始時間或開始時間設定為 30 秒。
因此，我們的影片播放器將跳過影片的前 30 秒，並且影片將從第 30 秒開始播放。
示例 1
在 video.js 中從特定時間播放影片的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Play Video from a Particular Time</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"
controls="true"
muted="true"
autoplay="true"
preload="auto"
fluid="true"
poster="assets/sample.png"
data-setup='{}'
>
<source
src=" https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime(30);
</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 屬性用於使影片播放器具有響應性。
在底部的 <script> 標籤部分，我們的影片播放器（id 為“my-vide-player”）已初始化，然後我們對影片播放器使用了 currentTime 方法，其值為 30 秒。
在執行上述示例時，將在 Web 瀏覽器中建立一個影片播放器，該播放器將從第 30 秒標記而不是第 0 秒開始播放我們的影片。
因此，我們已成功地透過將值“30”作為數值引數傳遞給 currentTime 方法引用，從特定時間（即 30 秒）播放了我們的影片。但我們也可以將輸入值作為字串引數傳遞給此方法。
請考慮以下程式碼片段，以使用將字串引數傳遞給 currentTime 方法（這次以 60 秒為例）：
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime("60");
</script>
此程式碼段也與上面的大部分內容相似，但在這裡，我們將影片開始時間的設定為字串（“60”），而之前是數值（30）。除此之外，其他所有內容都完全相同。
示例 2
將上述程式碼片段新增到我們的完整示例中以從 60 秒標記播放我們的影片，將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Play Video from a Particular Time</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"
controls="true"
muted="true"
autoplay="true"
preload="auto"
fluid="true"
width=580
height=350
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime("60");
</script>
</body>
</html>
在上面的示例中，在 <script> 部分，您會注意到 currentTime 方法的輸入引數型別已從數字更改為字串，並且這次傳遞給此方法的值為 60 秒。
執行後，此示例也將建立一個幾乎相同的影片播放器，該播放器將從特定時間（即 60 秒）而不是 0 秒開始播放我們的影片。
因此，這些是您可以利用 currentTime 方法在 video.js 播放器中從特定時間播放影片的兩種方法。
請注意，傳遞給 video.js currentTime 方法的開始時間值不能超過影片的總長度。例如，對於長度僅為 5 分鐘或 300 秒的影片，您不能將 1000 秒作為值傳遞。在這種情況下，影片將從末尾開始播放，即您只會看到一個重播按鈕，就像影片已經完全播放過一樣。
結論
在本教程中，我們瞭解瞭如何使用 video.js 從特定時間播放影片。我們透過使用 video.js 的預設選項引用（稱為 currentTime 方法）來實現這一點。我們還藉助每個方法的完整工作示例，瞭解了此方法的兩種型別的輸入引數（字串和數字）。
3K+ 瀏覽量
