広告のカウントダウン タイマーを作成する

UIElements を使用して、HTML5 IMA SDK に組み込まれているカウントダウン タイマーを使用することをおすすめします。独自のポリシーを実装する場合は、次の手順に沿って操作してください。

このガイドでは、HTML5 IMA SDK 実装にカウントダウン タイマーを追加する方法について説明します。

前提条件

このガイドは、HTML5 IMA SDK の実装が機能していることを前提としています。設定されていない場合は、IMA SDK を設定するをご覧ください。

タイマーを作成する

IMA 対応の動画プレーヤーにカウントダウン タイマーを追加するには、AdsManager インスタンスの remainingTime プロパティをポーリングする JavaScript を数行追加するだけです。setInterval() メソッドを使用して、1 秒ごとに関数を呼び出して adsManager.remainingTime を確認します。

// Global countdown timer
var countdownTimer;
...
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.STARTED,
      onAdsStarted);
}
...
function onAdsStarted(adEvent) {
  countdownTimer = setInterval(function() {
    var timeRemaining = adsManager.getRemainingTime();
    // Update UI with timeRemaining
  }, 1000);
}
...
function onContentResumeRequested(adEvent) {
  ...
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
}
  

試してみる

動作する実装例をご覧ください。