広告イベントと広告オブジェクト

概要

videojs-contrib-ads は、videojs/videojs-contrib-ads の GitHub リポジトリで公開されており、動画広告ライブラリや動画広告連携に必要な共通機能を提供します。これにより、特定の広告連携のために記述するコード量を削減できます。

これらのイベントとオブジェクトは、Brightcove が提供する FreeWheel および IMA3 プラグインに実装されています。また、SSAI プラグインでも同様に実装されていますが、以下は除きます：

player.ads.pod インターフェース
player.ads.provider オブジェクト

広告イベント

広告プロバイダは、それぞれ固有のイベントを発行することができます。これらのイベントは通常、広告再生の状態をメトリクスとして追跡したり、カスタム UI を作成したりするために使用されます。以下のイベントを実装することで、統一性を保ち、カスタム UI やアナリティクスプロバイダが広告プロバイダに依存しない形で動作できるようになります。

イベント	ディスパッチされるタイミング
`ads-request`	広告データがリクエストされたとき
`ads-load`	広告データがリクエスト後に利用可能になったとき
`ads-pod-started`	リニア広告ポッドが開始されたとき
`ads-pod-ended`	リニア広告ポッドが完了したとき
`ads-allpods-completed`	すべてのリニア広告が完了したとき
`ads-ad-started`	広告の再生が開始されたとき
`ads-ad-ended`	広告の再生が完了したとき
`ads-first-quartile`	広告再生ヘッドが最初の四分位を通過したとき
`ads-midpoint`	広告再生ヘッドが中間点を通過したとき
`ads-third-quartile`	広告再生ヘッドが第三四分位を通過したとき
`ads-pause`	広告が一時停止されたとき
`ads-play`	広告の再生が再開されたとき
`ads-volumechange`	広告の音量が変更されたとき
`ads-click`	広告がクリックされたとき

これらのイベントは、プレーヤーオブジェクトからリッスンできます。以下は ads-ad-started イベントをリッスンするコード例と、イベントハンドラに渡されるオブジェクトの例です。

      videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
        var myPlayer = this;
        ...
        myPlayer.on('ads-ad-started',function( evt ){
          console.log('ads-ad-started event passed to event handler', evt);
        });

広告オブジェクト

ご覧の通り、イベントハンドラに渡されるイベントオブジェクトだけでは十分な情報を得られません。そのため、より詳細な広告情報を取得するために使用できる 2 つのオブジェクトがあります。それが player.ads.ad と player.ads.pod です。

下のスクリーンショットから、player.ads.ad オブジェクトには広告の type や duration などの情報が含まれていることがわかります。

player.ads.pod オブジェクトには、player.ads.ad と同様の情報に加えて、ポッド内の広告数も含まれます。最初のスクリーンショットは単一広告のポッド、次のスクリーンショットは 3 つの広告を含むポッドを示しています。

Google の AdsManager

Google の google.ima.AdsManager インターフェースには利用可能なメソッドやプロパティが多数用意されています。情報取得のためのプロパティやメソッドは利用できますが、destroy、setAutoPlayAdBreaks、stop など、動作を変えるメソッドの使用は推奨されません。使用例として、以下のメソッドがあります：

AdsManager.getRemainingTime

種別: google.ima.AdsManager.getRemainingTime

使用例: myPlayer.ima3.adsManager.getRemainingTime()

このメソッドは、現在再生中の広告の残り時間を返します。広告が存在しない、または再生が終了している場合は -1 を返します。詳細は Google のドキュメントを参照してください。