Player イベント
概要
Brightcove Player ビデオの再生を制御するための多くのイベントがあります。 このトピックでは、さまざまなタイプのイベントについて概要を説明します。
完全なリスト Brightcove Player イベントはで見つけることができます Player メソッド/イベントAPI 参照ドキュメント。 このドキュメントは、を構成する実際のコードの一部であるイベントを反映しています player.
メディアイベント
HTMLリビングスタンダード ドキュメントは、Webアプリケーションに必要なHTMLとAPIの開発に関する情報の素晴らしいリソースです。 これはWebハイパーテキストアプリケーションテクノロジーワーキンググループ(WHATWG)によって最新の状態に保たれている「生きている」ドキュメントであり、Webを発展させることに関心のある人々の集まりです。
Brightcove Player HTMLフレームワーク上で実行され、以下をトリガーします メディアイベント.
このドキュメントのイベントに関連する用語を次に示します。
ブロックされた
再生が終了した場合、MediaControllerはブロックされたとみなされます。 一時停止。 メディア要素は、そのコントローラが ブロックされたメディアコントローラ.
MediaController
A MediaController 複数のメディア要素の再生を調整するオブジェクトです。
メディア要素
A メディア要素 オーディオデータまたはビデオおよびオーディオデータをユーザに提示する。
奴隷
デフォルトでは、各メディア要素にはno MediaController
。 メディア要素が MediaController
、彼らは言われている 奴隷 コントローラに送信します。 コントローラは、それに従属する各メディア要素の再生速度およびボリュームを変更する。 スレーブ要素の1つが予期せずに停止した場合、コントローラは他のスレーブ要素を停止します。
バッファリングとQoSイベント
バッファリングとサービス品質(QoS)に関連するイベントのサブセットを次に示します。
イベント名 | 説明 |
---|---|
progress |
ビデオデータのバッファリング(ロード) |
waiting |
要求されたビデオデータを瞬間的に待っています |
stalled |
バッファリングが停止しました |
error |
動画の読み込み中にエラーが発生しました |
playing |
一時停止またはダウンロードの遅延後に再生が再開されました |
ratechange |
再生速度が変更されました(手動または自動) |
スタートアップイベント
ときに発生するイベントの数があります player が初期化され、ビデオを再生する準備をします。 それらは、ディスパッチされる順序でここにリストされています。
-
loadstart
:次の場合にディスパッチされます player が初期化され、再生する新しいソースを提供する場合に再初期化された場合 loadedmetadata
:次の場合にディスパッチされます player つまり、最初のセグメントがダウンロードされたときの初期期間とディメンション情報があります。 ために live ビデオloadedmetadata
ユーザーが[再生]をクリックするまで、イベントはディスパッチされません。 それの訳は live ユーザーが[再生]をクリックするまで、動画はセグメントのダウンロードを開始しません。loadeddata
:次の場合にディスパッチされます player 現在の再生位置にデータをダウンロードしました
次のCodePenは、リッスンされてディスパッチされる起動イベントを示しています。 CodePenの上にマウスを置くと、 RERUN ボタンをクリックすると、イベントが再度表示されます。 コードを試したい場合は、 CODEPENで編集 リンクをクリックして編集環境に移動します。 あなたは JS ボタンをクリックすると、イベントリスナーを追加するJavaScriptが表示されます。
ペンを見る スタートアップイベントのデモ by Brightcove ラーニングサービス(@bcls)上 コードペン.
ready()メソッド
ready()
メソッドはイベントのように見えるという点でXNUMXつの性格を持っていますが、メソッドのように使用します。 このメソッド/イベントは、 player コマンドを受信する準備ができています。
ready()
メソッドがイベントリスナーと異なる点は、 ready
イベントはすでに発生しています ready()
メソッドを使用します。 開発の出発点を提供するために、以下のように使用される方法がよく見えます。 Brightcove Player:
videojs.getPlayer('myPlayerID').ready(function(){
var myPlayer = this;
});
ready()とon( 'loadedmetadata'、...)
注意: ready()
と対話したい場合は正しく機能します playerたとえば、プログラムでプラグインを追加します。 たとえば、すぐにビデオを操作したい場合は、 play()
上記のコードスニペットが正しく機能するとは限りません。 より良いアプローチは、 loadedmetadata
ビデオとやり取りする
videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
var myPlayer = this;
myPlayer.play();
});
要約すると、 player あなたはこれを使うことができます:
videojs.getPlayer('myPlayerID').ready()
あなたがすぐにビデオと対話したい場合 player これを使って:
videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){})
全画面イベント
A fullscreenchange
イベントは player 全画面表示モードに切り替えられたとき。 同じイベントがブロードキャストされるかどうか player フルスクリーンになるか、通常モードに戻ります。何が起こったかを知ることが重要な場合は、 player.isFullscreen()
かどうかを判断するメソッド player は現在全画面モードです。
以下のCodepenはこれを行う方法を示しています。
ペンを見る Brightcove Player 全画面イベント by Brightcove ラーニングサービス(@bcls)上 コードペン.
広告イベント
に広告ライブラリと機能を含めるには player、あなたは IMA3プラグイン または FreeWheelプラグイン。 これは、 videojs adsフレームワーク (videojs-contrib-ads)。 これらの広告プラグインは両方とも、次の表に示す広告イベントを送出できます。 それぞれには、実装に特有の特定のイベントもあります。
イベント | 次の場合に送出されます。 |
---|---|
広告リクエスト | リクエストされた広告データ。 |
広告負荷 | 広告リクエスト後に広告データが利用可能な場合。 |
ads-ad-started | 広告の再生が開始されました。 |
ads-ad-ended | 広告の再生が終了しました。 |
ads-pause | 広告が一時停止しています。 |
広告再生 | 広告は一時停止から再開されます。 |
広告 - 第1四分位 | 広告の合計再生時間の25%を再生しました。 |
広告中点 | 広告の合計再生時間の50%を再生しました。 |
ads-third-quartile | 広告の合計再生時間の75%を再生しました。 |
ads-click | 視聴者が再生広告をクリックした。 |
ads-volumechange | 演奏広告の音量が変更されました。 |
ads-pod-started | リニア広告ポッド(広告のシーケンスグループ)の最初の広告が開始されました。 |
ads-pod-ended | リニア広告ポッド(順序付けされた広告グループ)の最後の広告が終了しました。 |
ads-allpods-completed | すべてのリニア広告の再生が完了しました。 |
bc-catalog-errorイベント
正常時のエラー処理 ready()
スクリプトブロックのセクションで問題が発生する可能性があります。 たとえば、 bc-catalog-error
イベントは、 player 準備ができています。エラーをリッスンすると ready()
エラーを処理することはできません。 この問題は、ジオフィルタリングを使用している、ビデオが未公開、ビデオがスケジューリング範囲外にある、または別のアカウントで発生している可能性があります。 完全な議論とその bc-catalog-error
イベント、 Player カタログ の資料をご参照ください。
進捗状況とタイムアップの日付
混乱は、 progress
更に timeupdate
イベント。 ザ Brightcove Player HTML5ビデオの上に構築され、その標準では progress
ブラウザがデータをダウンロードしているときにイベントが送出されます。 ザ timeupdate
イベントは、現在の再生位置が変更されたときに送出されます。
これは、ユーザーに混乱を招く可能性があります。 Brightcoveのスマート Player、そのAPIのように progress
イベントは何をする timeupdate
の Brightcove Player APIです。
timeupdateリスナーを削除する際の注意
場合によっては、追加したイベントリスナーを削除することもできます timeupdate
イベント。 ユースケースは、 Brightcove Player サンプル:プレビュー後に再生するための登録 資料。 この状況では、 player ある時間範囲で一時停止し、 timeupdate
時間チェックには、無名イベントハンドラ関数定義を使用します。 一度だけ一時停止したいので、イベントリスナーを削除する必要があります。 あなたは単純にしたくない:
myPlayer.off('timeupdate');
もちろん、これにより、すべてのイベントリスナーが削除されます。 timeupdate
これを行う他の問題の中でも、タイムスクラバーが前進するのを妨げるでしょう。 何が行われる必要があるのは、通常の関数定義構文(関数宣言)を使用して関数を作成し、次に1つのイベントリスナーを削除することです。 短縮コードは次のとおりです。
// 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_request
イベント:
player.on('analytics_request', function(e) {
videojs.log('sent a(n) ' + e.params.event + ' beacon!', e.params);
});
特定のビーコンを聞く
をリッスンすることで送信された特定の分析ビーコンを追跡できます analytics_request_{beacon_name}
イベント。
{beacon_name}
のいずれかの名前です player データコレクターに送信されるイベント。 これらのイベントの完全なリストについては、 Data Collection API 参照.
例
player.on('analytics_request_video_impression', function(e) {
videojs.log('sent an impression beacon!', e.params);
});
メソッド連鎖はサポートされていません
バージョン6の Brightcove Player イベントによるメソッド連鎖はもはやサポートされていません。 つまり、これを行うことはできません:
player.on(event, function () {})
.on(event, function () {})
.on(event, function () {})
.on(event, function () {});