玩家事件
概覽
Brightcove Player具有許多事件供您控制視頻播放。本主題概述了不同類型的事件。
可以在以下位置找到Brightcove Player事件的完整列表:播放器方法/事件API參考文件。本文檔反映了構成播放器的實際代碼中的事件。
媒體活動
的HTML生活標準該文檔是獲取有關HTML開發和Web應用程序所需API的信息的絕佳資源。這是一個“活著的”文檔,由Web超文本應用程序技術工作組(WHATWG)保持最新狀態,該工作組是一個不斷發展的社區,對網絡的發展感興趣。
Brightcove Player在HTML框架之上運行,這將觸發以下操作媒體活動。
以下是與本文檔中的事件相關的一些術語:
受阻
如果回放已完成,則認為MediaController被阻止已暫停。如果媒體元素的控制器是阻止的媒體控制器。
媒體控制器
一種媒體控制器是協調多個媒體元素播放的對象。
媒體元素
一種媒體元素向用戶顯示音頻數據或視頻和音頻數據。
奴隸
默認情況下,每個媒體元素都沒有MediaController
。當媒體元素與MediaController
,據說是奴隸到控制器。控制器修改從屬的每個媒體元素的播放速率和音量。如果一個從屬元件意外停止,則控制器將停止其他從屬元件。
緩沖和QoS事件
以下是與緩沖和服務質量(QoS)相關的事件的子集:
活動名稱 | 描述 |
---|---|
progress |
緩衝(加載)視頻數據 |
waiting |
暫時等待請求的視頻數據 |
stalled |
緩衝停頓 |
error |
加載視頻時發生錯誤 |
playing |
暫停或下載延遲後恢復播放 |
ratechange |
播放速率已更改(可以是手動或自動) |
啟動事件
播放器初始化並準備播放視頻時,會發生許多事件。它們按照將被分派的順序在此處列出:
-
loadstart
:在播放器初始化時以及在為播放器提供新播放源的情況下重新初始化時調度 loadedmetadata
:在播放器具有初始持續時間和尺寸信息(即下載第一段)時調度。對於直播視頻,loadedmetadata
在用戶點擊播放之前不會調度該事件。這是因為在用戶單擊播放之前,實時視頻不會開始下載片段。loadeddata
:播放器在當前播放位置下載數據時調度
以下CodePen顯示了正在偵聽和調度的啟動事件。請注意,如果將鼠標懸停在CodePen上,則可以單擊重新運行位於右下角的按鈕可再次查看事件。如果您想嘗試使用該代碼,請點擊在CODEPEN上編輯標題中的鏈接以移至編輯環境。您可以點擊JS按鈕以查看添加事件偵聽器的JavaScript。
看筆啟動活動演示通過Brightcove學習服務( @bcls) 上密碼筆。
ready()方法
的ready()
方法具有雙重個性,因為它看起來像是事件,但是您將其用作方法。此方法/事件表示播放器已準備好接收命令。
的ready()
方法與事件監聽器的不同之處在於,如果ready
事件已經發生,將觸發ready()
立即使用方法。您經常會看到以下方法,這些方法為使用Brightcove Player開發提供了起點:
videojs.getPlayer('myPlayerID').ready(function(){
var myPlayer = this;
});
ready()與on('loadedmetadata',...)
注意使用ready()
如果您希望與播放器進行交互,則可以正常運行,例如以編程方式添加插件。例如,如果您想立即與視頻互動,請使用play()
,上述代碼段將無法始終正常運行。更好的方法是聽loadedmetadata
與視頻互動,例如:
videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
var myPlayer = this;
myPlayer.play();
});
總之,要與玩家互動,您可以使用以下方法:
videojs.getPlayer('myPlayerID').ready()
如果您希望立即與播放器中的視頻進行交互,請使用以下命令:
videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){})
全屏活動
一種fullscreenchange
當事件切換到全屏模式或從全屏模式切換時,事件將由播放器發出。無論播放器將進入全屏模式還是返回正常模式,都會廣播相同的事件。player.isFullscreen()
確定播放器當前是否處於全屏模式的方法。
下面的Codepen說明瞭如何執行此操作。
看筆Brightcove Player全屏活動通過Brightcove學習服務( @bcls) 上密碼筆。
廣告活動
要將廣告庫和功能包含到播放器中,您可以使用IMA3插件或者FreeWheel插件。這是建立在videojs廣告框架(videojs-contrib-ads)。這兩個廣告插件都可以分發下表中顯示的廣告事件。每一個還具有特定於實現的特定事件。
事件 | 傳送時間: |
---|---|
廣告-請求 | 根據要求提供廣告資料。 |
廣告載入 | 在廣告請求後有可用的廣告資料時。 |
廣告-廣告開始 | 廣告已開始播放。 |
廣告-廣告 | 廣告已經播放完畢。 |
廣告-暫停 | 廣告已暫停。 |
廣告播放 | 廣告會從暫停中繼續。 |
廣告-第一四分位 | 廣告播放了其總持續時間的 25%。 |
廣告-中點 | 廣告播放了其總持續時間的 50%。 |
廣告-第三四分位 | 廣告播放的總持續時間的 75%。 |
廣告-按一下 | 觀眾點擊播放廣告。 |
廣告-磁碟區變更 | 播放廣告的音量已變更。 |
廣告-網格已啟動 | 線性廣告網繭 (已排序的廣告群組) 中的第一個廣告已開始。 |
廣告-網格端 | 線性廣告網繭 (已排序的廣告群組) 中的最後一個廣告已完成。 |
廣告-完成 | 所有線性廣告都已完成播放。 |
bc目錄錯誤事件
處理指令碼區塊中正常ready()
區段中的錯誤可能會造成問題。例如,bc-catalog-error
事件可能會在播放程式準備就緒之前傳送,而且如果您聆聽該ready()
區段中的錯誤,則無法處理錯誤。使用地理篩選、視訊未發佈、視訊超出排程範圍或不同的帳戶時,就會發生這個問題。有關完整的討論和示例處理bc-catalog-error
活動,請參閱玩家目錄文件。
進度和時間更新
關於兩者之間的差異可能會造成混淆progress
和timeupdate
事件。Brightcove Player建立在HTML5視頻的基礎上,按照該標準,progress
瀏覽器下載數據時調度事件。的timeupdate
當前播放位置更改時調度事件。
這可能會使Brightcove的Smart Player用戶感到困惑,因為該API progress
事件做什麼timeupdate
在Brightcove Player API中執行。
小心刪除timeupdate監聽器
在某些情況下,您可能想刪除添加到事件監聽器中的事件監聽器。timeupdate
事件。用例顯示在Brightcove Player示例:預覽後註冊播放文件。在這種情況下,您希望播放器在某個時間範圍內暫停,並且您正在使用timeupdate
用於時間檢查,然後使用匿名事件處理程序函數定義。您只想暫停一次,因此您需要刪除事件監聽器。您不想簡單地做:
myPlayer.off('timeupdate');
當然,這會將所有事件監聽器刪除timeupdate
,以及這樣做的其他問題將阻止時間淨化器的發展。需要做的是使用正常的函數定義語法(函數聲明)創建一個函數,然後僅刪除一個事件偵聽器。縮寫代碼如下所示:
// Add the event handler
myPlayer.on('timeupdate', timeupdateHandler);
// Handle the event then remove JUST this event listener on timeupdate
function timeupdateHandler(evt) {
...
myPlayer.off('timeupdate', timeupdateHandler);
}
分析事件
每次將信標發送到Analytics數據收集器都會觸發一個事件。您可以收聽任何信標或特定信標。
聽所有信標
您可以跟踪通過偵聽發送的所有分析信標analytics-beacon
事件:
player.on('analytics-beacon', function(e) {
videojs.log('sent a(n) ' + e.params.event + ' beacon!', e.params);
});
收聽特定的信標
您可以跟踪通過偵聽發送的特定分析信標analytics-beacon-{beacon_name}
事件。
{beacon_name}
是發送到數據收集器的任何播放器事件的名稱。有關這些事件的完整列表,請參見數據收集API參考。
範例
player.on('analytics-beacon-video-impression', function(e) {
videojs.log('sent an impression beacon!', e.params);
});
不支持方法鏈接
從Brightcove Player版本6開始,不再支持與事件的方法鏈接。這意味著您不能這樣做:
player.on(event, function () {})
.on(event, function () {})
.on(event, function () {})
.on(event, function () {});