IMA SDK を使用する場合、コンテンツ動画プレーヤーと広告プレーヤーの 2 つの動画プレーヤーを使用します。SDK は、コンテンツ動画プレーヤー上の広告プレーヤーのオーバーレイを自動的に管理します。そのため、動画プレーヤーにイベント リスナーを直接追加しても機能しません。回避策の 1 つは、広告コンテナの表示と非表示を切り替えることですが、SDK の機能に干渉する可能性があります。この問題を解決するには、両方のプレーヤーを親 div でラップし、それにイベント リスナーをアタッチします。このガイドでは、その方法について説明します。
前提条件
- IMA HTML5 SDK が統合された HTML5 動画プレーヤーアカウントがない場合は、スタートガイドをご覧ください。
HTML を変更する
まず、HTML を変更して、広告プレーヤーとコンテンツ動画プレーヤーの両方をラップする div を追加する必要があります。スタートガイドでは、この処理は mainContainer ですでに完了しています。
... <div id="mainContainer"> <div id="content"> <video id="contentElement"> <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"> </video> </div> <div id="adContainer"></div> </div> ...
JavaScript にイベント リスナーを追加する
次に、動画へのクリックを検知するなど、イベント リスナーを JavaScript コードに追加します。ads.js での例を次に示します。
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
これで完了です。動画をクリックすると、広告が再生されていても、クリックスルーが機能しているかどうかにかかわらず、ポップアップが表示されます。
試してみる
実際に実装されている例を以下に示します。