このページは Cloud Translation API によって翻訳されました。

広告のルール

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();
}

試してみる

以下に、機能する実装を示します。

動画内の移動のトラブルは

広告ルールを使用している場合、クリックとドラッグで移動する際に問題が発生することがあります。具体的には、ユーザーがクリックしてドラッグし、複数の動画にわたってシークした後です。その中の 2 つ以上の連続配信広告が防ぐことができます。これは、動画再生中に動画のプレイヘッド時間が更新され、ユーザーが求めているものユーザーの操作中に SDK が現在の時刻をポーリングし、ユーザーが広告を通り過ぎると、その広告を再生すべきと判断する場合があります。コンテンツがその広告、次にシーク位置以降の最新の広告が再生されます。1 つのこの問題を視覚的に表現すると、下の図で確認できます。

これを解決する簡単な方法は、ユーザーが開始したときに現在の時刻を保存することです。ユーザーがリクエストした時点まで通常の再生を再開します。ソリューションを視覚的に表したドキュメントについては、次の図をご覧ください。

この解決策では、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 プロパティではなく、ミッドロール挿入点を再生するタイミングを決定する作成します。