IMA HTML5 SDK では、完全に自動化された広告再生リストがサポートされています。この機能 指定したとおりにコンテンツにミッドロール挿入点を挿入する Google アド マネージャー 自動的に選択されますまた 動画プレーヤーのコードが (プレロール、ミッドロール、ポストロールを含むミッドロール挿入点をサポートするために必要なもの)
AdsManager
を作成する際に、contentPlayback
オブジェクトは getAdsManager を介して渡されます。 あります。このオブジェクトは 現在のプレイヘッドを返すcurrentTime
プロパティがある 指定します。HTML5 のvideo
要素を使用して、 その要素を SDK に渡すだけです。このオブジェクト コンテンツ再生の進行状況をトラッキングし、 アド マネージャーで指定した時間に自動挿入される。また、 SDK がデベロッパーに代わってコンテンツの状態を処理することを SDK に認識させます。var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // See API reference for contentPlayback.
- ポストロールが確実に再生されるようにするには、コンテンツがいつ配信されるかを SDK に通知する必要があります
終了します。ただし、SDK は一部のケースでお客様の動画を使用するため、
プレーヤーに広告を再生するため、SDK に広告を再生するタイミングのみを
広告の視聴が終了したときには終了しません。これを行うには、
次のコードを使用します。
var videoContent = document.getElementById('contentElement'); var contentEndedListener = function() {adsLoader.contentComplete();}; videoContent.addEventListener('ended', contentEndedListener); function onContentPauseRequested() { contentElement.removeEventListener('ended', contentEndedListener); ... } function onContentResumeRequested() { contentElement.addEventListener('ended', contentEndedListener); ... }
CONTENT_PAUSE_REQUESTED
およびCONTENT_RESUME_REQUESTED
イベントは、ミッドロール挿入点の再生時にコンテンツを一時停止および再開するために使用されます。- 動画プレーヤーがドラッグしてシークに対応し、動画の現在の時刻プロパティが
ユーザーのドラッグ中に動画プレーヤーが更新されるため、SDK では
コンテンツの視聴とコンテンツの再生の間の
getAdsManager
のパラメータとしてカスタム contentPlayback オブジェクトを使用する必要があります。 このユースケースの例については、シークに関する問題をご覧ください。
注: コンテンツの再生が終了したり、
ユーザーが再生を停止した場合は、AdsLoader.contentComplete を呼び出す必要があります。
コンテンツの作成が完了したことを SDK に通知します。すると SDK は
ポストロール広告ブレーク(スケジュール設定されている場合)ALL_ADS_COMPLETED
すべてのミッドロール挿入点が再生されるとイベントが発生します。また
init()
が呼び出されたときにコンテンツ トラッキングが開始されるため、
コンテンツを再生する前に必ず init()
を呼び出します。
ミッドロール挿入点の自動再生を無効にする
状況によっては、SDK でミッドロール挿入点を再生しないようにしたい場合があります。
すぐに対応できます。このシナリオでは、ミッドロール挿入点の自動再生を無効にできます
代わりに、広告ブレークを再生する準備が整ったら SDK に通知できます。こちらの
SDK が広告ブレークを読み込むと、SDK は
AD_BREAK_READY
イベント。ミッドロール挿入点を開始する準備ができたら
adsManager.start() を呼び出すことができます。
function requestAds() {} ... adsLoader.getSettings().setAutoPlayAdBreaks(false); ... } function onAdsManagerLoaded() { ... // For non-auto ad breaks, listen for ad break ready adsManager.addEventListener( google.ima.AdEvent.Type.AD_BREAK_READY, adBreakReadyHandler); ... } function adBreakReadyHandler() { // Once we're ready to play ads. To skip this ad break, simply return // from this handler without calling adsManager.start(). adsManager.start(); }
試してみる
以下に、機能する実装を示します。
<ph type="x-smartling-placeholder">動画内の移動のトラブルは
広告ルールを使用している場合、クリックとドラッグで移動する際に問題が発生することがあります。 具体的には、ユーザーがクリックしてドラッグし、複数の動画にわたってシークした後です。 その中の 2 つ以上の連続配信広告が 防ぐことができます。これは、動画再生中に動画のプレイヘッド時間が更新され、 ユーザーが求めているものユーザーの操作中に SDK が現在の時刻をポーリングし、 ユーザーが広告を通り過ぎると、その広告を再生すべきと判断する場合があります。コンテンツが その広告、次にシーク位置以降の最新の広告が再生されます。1 つの この問題を視覚的に表現すると、下の図で確認できます。
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_issue.jpg?authuser=9&hl=ja)
これを解決する簡単な方法は、ユーザーが開始したときに現在の時刻を保存することです。 ユーザーがリクエストした時点まで 通常の再生を再開します。ソリューションを視覚的に表したドキュメントについては、 次の図をご覧ください。
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_fix.jpg?authuser=9&hl=ja)
この解決策では、0:10 のミッドロールを適切にスキップし、0:20 のミッドロールのみを再生します。
そのためには、次のようにカスタムのプレイヘッド トラッカーを使用します。以下のコード
高度な HTML5 に ads.js
の変更(太字で表示)が含まれています
サンプルを
ダウンロード ページをご覧ください。
var Ads = function(application, videoPlayer) { ... this.currentTime = 0; setInterval(this.updateCurrentTime, 1000); }; Ads.prototype.updateCurrentTime = function() { if (!this.videoPlayer_.contentPlayer.seeking) { this.currentTime = this.videoPlayer_.contentPlayer.currentTime; } }; Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) { this.application_.log('Ads loaded.'); this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this); this.processAdsManager_(this.adsManager_); };
モバイル Safari に関する既知の問題
この方法は、モバイル版 Safari を除くすべてのプラットフォームで機能します。モバイルの場合 Safari では、video タグのシーク プロパティが正しく実装されていません( 常に false を返します。これを回避するため、独自のチェックを ユーザーが動画内を移動していないか確認します。このメソッドのサンプルコード できます。ここでも、以下の太字の行は既存のコードに対する変更です。
var Ads = function(application, videoPlayer) { ... this.currentTime = 0; setInterval(this.updateCurrentTime, 1000); this.seeking = false; this.seekCheckInterval = 1000; // You may need to adjust this value, depending on your platform this.seekThreshold = 100; this.previousTime = 0; setInterval( Application.bind(this, this.checkForSeeking), this.seekCheckInterval); }; Ads.prototype.updateCurrentTime = function() { if (!this.seeking) { this.currentTime = this.videoPlayer_.contentPlayer.currentTime; } }; Ads.prototype.checkForSeeking = function() { var currentTime = this.videoPlayer_.contentPlayer.currentTime; // How much time has passed since you last ran this method, in milliseconds var diff = (currentTime - this.previousTime) * 1000; // If that difference is greater than the time since you last ran this method, // plus the threshold, the user was seeking if (Math.abs(diff) > this.interval + this.threshold) { this.seeking = true; } else { this.seeking = false; } // Grab the current video time again to make up for time spent in this method previousTime = this.videoPlayer_.contentPlayer.currentTime; }; Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) { this.application_.log('Ads loaded.'); this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this); this.processAdsManager_(this.adsManager_); };
この変更により、SDK は Ads
の currentTime プロパティを使用するようになりました。
の currentTime
プロパティではなく、ミッドロール挿入点を再生するタイミングを決定する
作成します。