資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學video.js播放器的回撥函式
在本教程中，我們將學習各種事件監聽器以及如何將它們與video.js播放器的回撥函式一起使用。Video.js是一個流行的開源庫，用於在瀏覽器中建立影片播放器。使用video.js，您可以輕鬆調整影片播放器的每一個細節。除此之外，video.js還提供了許多預設事件，例如play、pause、playing、loadedmetadata、timeupdate、canplaythrough、loadeddata等。
因此，在本教程中，我們將學習video.js中各種事件監聽器的回撥函式。回撥函式非常重要，因為它們在發生特定事件時會被觸發。因此，我們可以藉助各種回撥函式執行不同的操作。現在讓我們進入文章的下一部分，瞭解各種事件及其回撥函式。
video.js播放器的回撥函式
回撥函式是指作為輸入引數傳遞給另一個函式的函式。但是，回撥函式廣泛用於在非同步操作（如事件）之後繼續執行程式碼。事件監聽器是在觸發特定事件時呼叫的函式或方法。例如，事件可以是播放影片或暫停影片等。透過使用事件監聽器和回撥函式，我們可以實現我們想要的功能。
基本上，事件監聽器會持續等待一些使用者交互發生，例如播放影片、暫停影片，然後在事件觸發時執行相應的回撥函式。
如果我們具體談論video.js，您可以獲得許多事件監聽器，可用於更改影片播放器的狀態。例如，play、pause、resume等。
在本篇文章中，我們將逐一介紹以下事件及其回撥函式：
LoadedData事件
LoadedMetaData事件
Time Update事件
Ended事件
讓我們快速瀏覽一下每一個事件。
LoadedData事件
當載入影片的當前幀時，將觸發“loadeddata”事件的回撥函式。當前幀通常是影片的第一幀。因此，當載入當前幀但未載入下一幀時，將觸發loadeddata事件的回撥函式。
先決條件 - 假設您知道如何使用video.js庫建立一個基本的影片播放器，讓我們學習如何使用video.js捕獲“loadeddata”事件。
您可以使用“loadeddata”作為video.js播放器引用的輸入，使用player.on()方法來捕獲“loadeddata”事件。它將事件和回撥函式繫結在一起。它通常接受兩個引數作為輸入，第一個是事件名稱（在本例中為loadeddata），第二個引數是回撥函式，只要定義的事件被觸發，該函式就會被呼叫。因此，傳遞給“loadeddata”事件監聽器的回撥函式將在影片播放器的當前幀（第一幀）載入完畢時執行。
您可以使用以下程式碼來捕獲“loadeddata”事件並觸發回撥函式以在瀏覽器視窗中發出警報：
<script>
// Initializing the video player
const player = videojs('my-video-player');
// loadedData event listener
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
</script>
在前面的程式碼片段中，我們使用“player.on()”方法在我們的影片播放器引用上使用了“loadeddata”事件監聽器，以便在影片播放器的當前幀載入完畢時發出“Video Player Data Loaded”警報。
示例1
在這裡，我們展示了使用loadeddata事件監聽器的完整示例：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS CallBack Functions for Video Player</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"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
const player = videojs('my-video-player');
// loadedData event listener
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
</script>
</body>
</html>
我們在上面的程式碼中嘗試實現以下內容：
首先，我們使用了video.js的免費CDN URL，在程式碼的<head>部分匯入video.js所需的CSS和JS檔案。
此外，我們在程式碼的<body>部分建立了一個<video>元素。<video>元素已初始化為video.js、video-default-skin和vjs-big-play-centered等類。
video元素的“id”（即“my-video-player”）稍後在程式碼的<script>部分中用於為此id建立一個影片播放器。
我們還使用了<video>元素的一些標準HTML影片選項，例如controls、muted和poster。
在底部的<script>標籤中，使用“loadeddata”事件監聽器來顯示“Video Player Data Loaded”訊息，使用回撥函式在瀏覽器視窗中顯示，只要載入影片的當前幀。
執行上述程式碼將在瀏覽器中建立一個影片播放器，當載入影片的當前幀或第一幀時，它將在視窗上顯示一條警報訊息。
現在我們知道了如何在“loadeddata”事件監聽器中使用回撥函式，讓我們進入本文的下一部分，瞭解“loadedmetadata”監聽器。
LoadedMetaData事件
當瀏覽器載入影片的元資料（例如持續時間、尺寸、文字軌道等）時，將呼叫“Loadedmetadata”事件監聽器的回撥函式。當我們從URL或第三方API載入影片時，此監聽器非常有用。在這些情況下，我們需要等待影片載入完畢，然後再對播放器進行任何更改。
要使用此監聽器，我們需要使用“loadedmetadata”作為video.js播放器引用的輸入，使用“player.on()”方法。
您可以使用以下程式碼來顯示一條訊息，只要使用帶有回撥函式的“loadedmetadata”事件載入影片的元資料：
<script>
// Initializing the video player
let player = videojs('my-video-player');
// Loaded Meta Data Event listener
player.on('loadedmetadata', function () {
window.alert('Video Player Meta Data Loaded');
});
</script>
在上面的程式碼片段中，使用了“loadedmetadata”事件監聽器來等待影片元資料載入完畢，然後再發出文本警報。即使在“play”事件監聽器之前，也會呼叫此事件的回撥函式，因為影片需要先載入才能播放。
現在，讓我們繼續學習下一個事件監聽器的回撥函式。
Time Update事件
“Timeupdate”事件監聽器的回撥函式是最重要的監聽器之一，因為它每次更改影片的當前播放時間時都會被觸發。因此，當影片正在播放時，此事件每15-250毫秒觸發一次。此事件的回撥函式可以與“timeupdate”一起用作player.on方法的輸入。
考慮以下程式碼片段，使用帶有回撥函式的“timeupdate”事件監聽器在影片超過15秒標記時顯示訊息：
<script>
// Initializing the video player
let player = videojs('my-video-player');
// Time Update event listener
let alertShown = false;
player.on('timeupdate', function () {
if (player.currentTime() > 15 && !alertShown) {
window.alert('Video has Played for 15 seconds!');
alertShown = true;
}
});
</script>
在上面的程式碼片段中，我們使用“timeupdate”事件來在影片播放15秒後使用回撥函式發出文字警報。請注意如何使用currentTime()方法獲取影片播放器的當前時間。
現在，讓我們繼續學習ended事件監聽器的回撥函式。
Ended監聽器
當我們的影片結束時，將呼叫“Ended”事件監聽器的回撥函式。噹噹前影片結束時，它可以用於顯示重播按鈕或播放下一個影片。要使用此監聽器，我們需要使用“ended”作為video.js播放器引用的輸入，使用“player.on()”方法。
讓我們在影片結束時發出訊息，使用帶有回撥函式的“ended”監聽器：
<script>
// Initializing the video player with video options
let player = videojs('my-video-player');
// Ended Event listener
player.on('ended', function () {
window.alert('Video Player Ended!');
});
</script>
在上面的程式碼片段中，我們使用了“ended”監聽器，噹噹前影片播放完畢時，在視窗上顯示文字。
示例2
將所有上述事件監聽器新增到完整示例中，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS CallBack Functions for Video Player</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"
controls="true"
muted="true"
autoplay="true"
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 with video options
let player = videojs('my-video-player');
// loadedData event listener
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
// Time Update event listener
let alertShown = false;
player.on('timeupdate', function () {
if (player.currentTime() > 15 && !alertShown) {
window.alert('Video has Played for 15 seconds!');
alertShown = true;
}
});
// Loaded Meta Data Event listener
player.on('loadedmetadata', function () {
window.alert('Video Player MetaData Loaded');
});
// Ended Event listener
player.on('ended', function () {
window.alert('Video Player Ended!');
});
</script>
</body>
</html>
執行上述程式碼後，將建立一個影片播放器，該播放器將在影片元資料載入時、影片資料載入時以及影片結束時顯示文字訊息。
結論
在本教程中，我們瞭解了video.js播放器中可使用的各種事件監聽器的回撥函式，例如loadeddata、loadedmetadata、timeupdate和ended。我們還透過完全可執行的示例瞭解瞭如何使用這些監聽器及其回撥函式。
2K+瀏覽量
