資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 Video.js 中獲取當前播放時間？
Video.js 是一個庫，允許您建立一個現代化外觀且先進的影片播放器，支援所有傳統的影片格式，如 mp4、Flv 等。此外，它還支援最新的影片格式，如 YouTube、Vimeo 等。在本教程中，我們將瞭解如何獲取使用 Video.js 建立的影片播放器的當前播放時間。
Video.js 提供了靈活的控制能力，即使是影片播放器的細微方面也能輕鬆掌控。因此，在本教程中，我們將嘗試獲取影片播放器的當前播放時間。獲取當前播放時間非常有用，因為它有很多應用，例如獲取當前播放時間並在特定時間呼叫函式，或在特定時間暫停音樂播放器。因此，讓我們繼續本教程的下一部分，瞭解如何獲取影片播放器的當前播放時間。
在 Video.js 中獲取當前播放時間
前提條件 − 假設您知道如何使用 Video.js 庫建立基本的影片播放器。
為了獲取 Video.js 播放器的當前播放時間，我們將使用 Video.js 的預設方法。該方法稱為 currentTime，它負責以秒為單位顯示影片播放器的時間。使用此方法非常簡單直接。我們只需要在影片播放器引用上呼叫 currentTime() 方法即可。
currentTime 方法不能在程式碼的 <html> 部分的“data-setup”屬性中使用。它需要在程式碼的 <script> 部分中對播放器引用進行呼叫。
請考慮以下程式碼片段，該片段使用 Video.js 來警告影片播放器的當前播放時間：
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Alerting the current Time of a video player
let currentTime = player.currentTime();
window.alert(`currentTime : ${currentTime}`);
</script>
在這裡，我們為 id 為“my-video-player”的 <video> 元素建立了一個影片播放器。然後，我們在播放器上使用 currentTime 方法來獲取影片播放器的當前時間（以秒為單位）。在最後一行，我們在瀏覽器視窗中警告了影片的當前時間。
示例 1
在完整的示例中使用上述程式碼片段來獲取影片播放器的當前時間，看起來像這樣：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Current Playback Time 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"
autoplay="true"
preload="true"
controls="true"
muted="true"
fluid="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
let player = videojs('my-video-player');
// Alerting the current Time of a video player
let currentTime = player.currentTime();
window.alert(`currentTime : ${currentTime}`);
</script>
</body>
</html>
說明
在此程式碼示例中，我們實現了以下內容：
首先，我們使用 CDN URL 在程式碼的 <head> 標記中匯入了 Video.js 的 CSS 和 JS 檔案。
接下來，我們在 <body> 部分內為我們的影片播放器建立了一個 <video> 元素，它具有各種類，例如“video.js vjs-default-skin vjs-big-play-centered”和“my-video-player”（作為影片“id”）。
我們還對 <video> 元素使用了一些標準的 HTML 影片選項，例如 controls 和 poster，並且我們還使用了 fluid 屬性來使我們的影片播放器具有響應性。
在 <script> 標記部分，我們使用 id 為“my-video-player”初始化了一個影片播放器，然後使用 currentTime 方法獲取當前時間，然後使用 window.alert 方法將其顯示在 Web 瀏覽器中。
當您在 Web 瀏覽器中執行上述程式碼時，您會注意到您會收到一個“currentTime: 0”的警報，然後您的影片播放器載入。Video.js 正在警告影片播放器的當前時間，在本例中為 0 秒。但這並不太有用，因為它每次我們重新載入影片播放器時都只顯示 0 秒。
問題在於 currentTime 方法是在建立影片播放器時立即呼叫的。因此，此時播放時間僅為 0 秒。
假設您希望在影片播放時連續檢視當前時間。為此，我們可以將“currentTime”方法與“timeupdate”事件監聽器結合使用，該監聽器每 15-200 毫秒更新時間變化。我們將記錄每次“timeupdate”事件的影片播放器的當前播放時間。
請考慮以下程式碼片段，該片段在影片播放時間發生變化時立即記錄當前播放時間：
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Using time update event listener
player.on('timeupdate', function () {
// Get current time and log
let currentTime = player.currentTime();
console.log("Current Time of the Video Player: ", currentTime)
});
</script>
在此程式碼片段中，我們首先使用 id 為“my-video-player”的 <video> 元素初始化我們的影片播放器。接下來，我們使用 player.on() 方法使用“timeupdate”事件監聽器。在“timeupdate”方法中，我們使用 player.currentTime() 方法獲取影片播放器的當前播放時間，然後最後將其記錄在 Web 瀏覽器的控制檯中。
示例 2
我們完整的示例，用於在每次時間更新事件時獲取影片播放器的當前播放時間，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Current Playback Time 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"
autoplay="true"
preload="true"
controls="true"
muted="true"
fluid="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
let player = videojs('my-video-player');
// Using time update event listener
player.on('timeupdate', function () {
// Get current time and log
let currentTime = player.currentTime();
console.log("Current Time of the Video Player: ", currentTime)
});
</script>
</body>
</html>
說明
如您所見，在 <script> 部分，我們使用了 time update 事件監聽器，該監聽器每 15-250 毫秒觸發一次，這意味著 time update 監聽器內的函式將每秒觸發 3-4 次。每次觸發 time update 函式時，我們都會獲取影片播放器的當前時間並將其記錄到瀏覽器控制檯中。
當上述程式碼在 Web 瀏覽器中執行時，將建立一個影片播放器，並且在瀏覽器的控制檯選項卡中，您將每秒至少收到三到四次影片的當前播放時間。因此，控制檯選項卡將有多個條目，例如“影片播放器的當前時間：1.527636”，其中 1.52 是影片播放器的當前播放時間（以秒為單位）。
因此，這就是您可以使用 currentTime 方法獲取使用 Video.js 建立的影片播放器的當前播放時間的方法。
結論
在本教程中，我們瞭解瞭如何在 Video.js 中獲取影片的當前播放時間。為此，我們使用了 Video.js 中預設提供的 current time 方法。此方法以秒為單位返回影片播放器的當前時間。我們還解釋瞭如何使用此方法以及 time update 事件監聽器，並提供了一個完整的可執行示例。
2K+ 次瀏覽
