プレイヤーイベント
概要
Brightcove Player には、動画の再生を制御するためのイベントが多数あります。このトピックでは、さまざまなタイプのイベントの概要について説明します。
Brightcove Player イベントの完全なリストは、 Player メソッド/イベント API リファレンスドキュメントを参照してください。このドキュメントは、プレーヤーを構成する実際のコードの一部であるイベントを反映しています。
メディアイベント
HTML Living Standard ドキュメントは、HTML の開発と Web アプリケーションに必要な API に関する情報を提供する素晴らしいリソースです。これは、Webハイパーテキストアプリケーション技術ワーキンググループ (WHATWG) によって最新の状態に保たれている「生きている」ドキュメントです。WHATWG は、ウェブの進化に関心のある人々の成長するコミュニティです。
Brightcove Playerは HTML フレームワーク上で動作し、次のメディアイベントをトリガーします。
このドキュメントでは、イベントに関連する用語をいくつか示します。
ブロックされた
再生が一時停止されている場合、MediaControl Liller はブロックされたと見なされます。メディアエレメントは、そのコントローラがブロックされたメディアコントローラである場合、そのメディアエレメントはブロックされます。
MediaController
MediaController は、複数のメディアエレメントの再生を調整するオブジェクトです。
メディアエレメント
メディアエレメントは、オーディオデータ、またはビデオおよびオーディオデータをユーザーに提示します。
奴隷化
デフォルトでは、各メディアエレメントにはがありませんMediaController
。メディアエレメントがに関連付けられている場合MediaController
、それらはコントローラにスレーブされていると言います。コントローラは、スレーブされた各メディアエレメントの再生レートとボリュームを変更します。スレーブされた要素の 1 つが予期せず停止した場合、コントローラは他のスレーブされた要素を停止します。
バッファリングとQoSイベント
次に、バッファリングとサービス品質(QoS)に関連するイベントのサブセットを示します。
イベント名 | 説明 |
---|---|
progress |
ビデオデータのバッファリング(ロード) |
waiting |
要求された動画データを一時的に待っています |
stalled |
バッファリングが停止しました |
error |
ビデオの読み込み中にエラーが発生しました |
playing |
一時停止またはダウンロードの遅延後に再生が再開されました |
ratechange |
再生速度が変更されました(手動または自動の可能性があります) |
スタートアップイベント
プレーヤーが初期化され、ビデオを再生する準備をしているときに発生するイベントが多数あります。これらは、発送される順番でここにリストされています。
-
loadstart
:プレーヤーが初期化されたときにディスパッチされ、再生する新しいソースを提供する場合に再初期化された場合 loadedmetadata
:プレイヤーに初期期間とディメンション情報があるとき、つまり最初のセグメントがダウンロードされたときに送出されます。ライブ動画の場合、ユーザーが [再生]loadedmetadata
をクリックするまでイベントは送出されません。これは、ユーザーが [再生] をクリックするまで、ライブ動画がセグメントのダウンロードを開始しないためです。loadeddata
:プレーヤーが現在の再生位置でデータをダウンロードしたときに送出されます
次の CodePen は、リッスンされ、送出されるスタートアップイベントを示しています。CodePen にマウスポインタを置いた場合、右下にある [ 再実行] ボタンをクリックして、イベントが送出されたかを再度確認できます。コードを試す場合は、ヘッダーの [ CODEPENで編集] リンクをクリックして、編集環境に移動します。 JS ボタンをクリックすると、イベントリスナーを追加する JavaScript を確認できます。
ペンを見るスタートアップイベントのデモ Brightcove Learning Services( @bcls) オンCodePen。
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は、これを行う方法を示しています。
ペンを見るBrightcovePlayerフルスクリーンイベント Brightcove Learning Services( @bcls) オンCodePen。
広告イベント
広告ライブラリと機能をプレーヤーに含めるには、 IMA3 プラグインまたは FreeWheel プラグインを使用できます。これは、 videojs広告フレームワーク(videojs-contrib-ads)の上に構築されています。これらの広告プラグインはどちらも、次の表に示す広告イベントをディスパッチできます。各イベントには、実装に固有の特定のイベントもあります。
イベント | 次の場合に送出されます。 |
---|---|
ads-request | リクエストに応じて、広告データ。 |
ads-load | 広告リクエストの後に広告データが利用可能になったとき。 |
ads-ad-started | 広告の再生が開始されました。 |
ads-ad-ended | 広告の再生が終了しました。 |
ads-pause | 広告が一時停止されます。 |
ads-play | 一時停止から広告が再開されます。 |
ads-first-quartile | 広告は合計期間の 25% を再生しました。 |
ads-midpoint | 広告は合計期間の 50% を再生しました。 |
ads-third-quartile | 広告は合計期間の 75% を演奏しました。 |
ads-click | 視聴者が再生中の広告をクリックした。 |
ads-volumechange | 再生中の広告のボリュームが変更されました。 |
ads-pod-started | リニア広告ポッド(シーケンスされた広告のグループ)の最初の広告が開始されました。 |
ads-pod-ended | リニア広告ポッド(シーケンシングされた広告のグループ)の最後の広告が終了しました。 |
ads-allpods-completed | すべてのリニア広告の再生が終了しました。 |
BC-カタログエラーイベント
スクリプトブロックの normal ready()
セクションでエラーを処理すると、問題が発生する可能性があります。例えば、bc-catalog-error
プレイヤーが準備が整う前にイベントが送出されることがあり、ready()
セクションでエラーを聞いた場合、エラーを処理することはできません。この問題は、ジオフィルタリングを使用している場合、ビデオが未公開の場合、ビデオがスケジュール範囲外である場合、または別のアカウントにある場合に発生する可能性があります。bc-catalog-error
イベントを処理する詳細な説明と例については、 Player カタログのドキュメントを参照してください。
進捗状況とタイムアップデート
progress
timeupdate
イベントとイベントの違いについては、混乱が発生する可能性があります。Brightcove Player は HTML5 動画の上に構築され、その標準では、progress
ブラウザーがデータをダウンロードしているときにイベントが送出されます。timeupdate
イベントは、現在の再生位置が変更されたときに送出されます。
これは、ブライトコーブのスマートプレーヤーのユーザにとって混乱を招く可能性があります。この API では、progress
イベントはブライトコーブ Player API timeupdate
での動作を行います。
timeupdate リスナーの削除注意
場合によっては、イベントに追加したイベントリスナーを削除したい場合があります。timeupdate
ユースケースは、Brightcove Playerのサンプルに示されています。プレビュードキュメント後に再生するために登録しています。このような状況では、プレーヤーをある時間範囲で一時停止し、timeupdate
時間チェックにを使用しているとします。その後、匿名イベントハンドラー関数定義を使用します。一時停止は 1 回だけなので、イベントリスナーを削除する必要があります。あなたは単にしたくありません:
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}
は、データコレクターに送信されるプレーヤイベントの名前です。これらのイベントの完全なリストについては、「データ収集 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 () {});