資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Video.js – 在影片緩衝 50% 時回撥函式
在本教程中，我們將展示如何在 video.js 中獲取影片的緩衝百分比，並在影片緩衝超過 50% 時使用回撥函式。Video.js 是一款知名的線上影片播放器 JavaScript 工具包，用於為各種影片格式建立網頁瀏覽器影片播放器。Video.js 是一個非常靈活且可自定義的庫，用於建立現代網頁影片播放器。它支援各種包、外掛和選項。使用 video.js，可以根據您的喜好配置 HTML 影片播放器的任何部分。
在本教程中，我們將討論如何在 video.js 中影片緩衝 50% 時呼叫回撥函式。首先，我們將學習如何使用 video.js 獲取影片的緩衝百分比，然後我們將新增一個回撥函式，在影片緩衝 50% 時觸發。讓我們繼續本教程的下一部分，瞭解如何使用 video.js 實現相同的功能。
在影片緩衝 50% 時回撥函式
影片緩衝是指預載入影片片段以進行流式傳輸。許多流行的影片流媒體網站都使用此技術來流式傳輸影片。影片的某些部分或片段會預載入，然後播放影片，這樣終端使用者就不必等待下載完整的影片。
先決條件 - 假設您知道如何使用 video.js 庫建立基本的影片播放器。
影片緩衝百分比是指影片緩衝量佔影片總長度的百分比。我們可以使用 video.js 獲取影片的緩衝百分比，方法是在影片播放器引用上使用bufferPercentage()方法。此方法返回以十進位制格式表示的影片在該特定時間之前緩衝的百分比。
但是，緩衝百分比的值會隨著影片的進度而變化，即它會從 0% 緩衝到 100% 緩衝，具體取決於影片播放了多少，使用者的頻寬速度等。因此，為了跟蹤影片的進度，我們需要監聽 'progress' 事件
進度事件監聽器
每當載入資源時，例如，每當從 URL 或第三方來源載入影片或音訊時，進度事件就會在 Web 瀏覽器中發生，此事件就會觸發。因此，進度事件可用於在影片載入進度發生變化時跟蹤影片的緩衝百分比。
您可以使用player.on()方法在影片播放器引用上使用 'play' 方法來使用此事件監聽器。傳遞給此事件監聽器（作為引數）的回撥函式將在影片開始載入後立即執行。
您需要以下程式碼才能使用進度事件獲取 video.js 播放器的緩衝百分比：
<script>
// Initializing the video player
const player = videojs('my-video-player');
// Buffer Percentage of the video with progress event listener
player.on('progress', function () {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage: ", buffPercentage);
});
</script>
在上面的程式碼片段中，我們使用videojs()方法在 ID 為 'my-video-player' 的<video>元素上建立了一個影片播放器例項。
然後，我們使用進度事件捕獲影片載入狀態的變化，並在該事件的回撥函式中，我們使用bufferPercent()方法獲取已緩衝影片的最新百分比。
執行上述程式碼後，影片緩衝百分比將在影片預載入後立即記錄到瀏覽器控制檯中，您將看到如下多個日誌：
Buffer Percentage: 0 Buffer Percentage: 0.010983981771910626 Buffer Percentage: 0.02974826966353168 Buffer Percentage: 0.05308923092884176 Buffer Percentage: 0.0733713463484793 Buffer Percentage: 0.09037201866684796 Buffer Percentage: 0.1020040768163907
這些是在影片預載入時顯示的多個緩衝百分比。由於這些值是十進位制的，因此緩衝百分比為 0.1 表示影片已緩衝 10%。
現在，我們已經瞭解瞭如何獲取影片的緩衝百分比，我們現在可以檢查影片緩衝百分比是否超過 50%（或 0.5 十進位制值），並根據該值呼叫函式或執行某些任務。
考慮以下程式碼片段，如果影片緩衝百分比超過 50%，則在瀏覽器視窗中顯示警報文字
<script>
// Initializing the video player
const player = videojs('my-video-player');
// Buffer Percentage of the video with progress event listener
player.on('progress', () => {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage", buffPercentage);
if (buffPercentage > 0.5) {
window.alert('50% of the video has been buffered.');
}
});
</script>
如您在上述程式碼中所見，我們使用 bufferedPercent 方法獲取影片的緩衝百分比。然後我們檢查緩衝百分比是否大於 0.5，即影片是否緩衝超過 50%。如果是這種情況，我們會在緩衝視窗中顯示“影片已緩衝 50%”。
除了顯示警報外，您還可以使用回撥函式執行特定任務。
示例 1
使用上述程式碼片段，並結合完整示例，如果影片緩衝超過 50%，則在瀏覽器視窗中顯示警報文字，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Buffer Percentage 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"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
data-setup='{}'
>
<source
src="https://vjs.zencdn.net/v/oceans.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
const player = videojs('my-video-player');
// Buffer Percentage of the video with progress event listener
player.on('progress', () => {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage", buffPercentage);
// Check if 50% of the video has been buffered
if (buffPercentage > 0.5) {
window.alert('50% of the video has been buffered.');
}
});
</script>
</body>
</html>
在上面的程式碼示例中，我們實現了以下功能：
首先，我們使用 video.js 的免費 CDN URL 在程式碼的<head>部分匯入 video.js 的必需 CSS 和 JS 檔案。
此外，我們在程式碼的<body>部分建立了一個<video>元素。<video>元素已初始化為 video.js、video-default-skin 和 vjs-big-play-centered 等類。
影片元素的 'id'（即 'my-video-player'）稍後在程式碼的<script>部分中用於為此 id 建立影片播放器。
我們還使用了<video>元素的一些標準 HTML 影片選項，如 controls、muted 和 poster，並且使用了 fluid 屬性來使影片播放器具有響應性。
對於源，我們使用了一個 mp4 影片，我們在源標記中將其 MIME 型別指定為 video/mp4。
在<script>標記中，已為 ID 為 'my-video-player' 的<video>元素初始化了影片播放器。
初始化影片播放器後，我們使用player.on方法呼叫事件監聽器。使用的事件為 'progress'，它負責在緩衝或預載入影片時呼叫回撥函式。
然後，我們使用影片播放器例項上的bufferedPercent()方法獲取影片當前緩衝的百分比，如果影片緩衝超過 50%，則會在瀏覽器視窗中顯示文字。
在 Web 瀏覽器中執行上述程式碼時，當影片緩衝超過 50% 時，它將顯示“影片已緩衝 50%”。因此，我們已成功學習如何在 video.js 中處理影片緩衝 50% 時的事件。
結論
在本教程中，我們瞭解瞭如何在 video.js 中捕獲影片緩衝 50% 時的事件。我們使用 video.js 公開的 bufferedPercent() 方法獲取影片當前緩衝的百分比。此外，我們使用了 'progress' 事件監聽器來捕獲影片緩衝狀態的變化。最後，如果影片緩衝百分比超過 50%，我們會在瀏覽器視窗中顯示警報。我們還查看了一個完全可用的示例。
949 次檢視
