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

自動再生

自動再生はパソコンとモバイルウェブデバイスでサポートされています。

Chrome 53 と iOS 10 以降、Android と iPhone でインラインのミュート自動再生がサポートされます。

パソコン版 Safari 11 で自動再生の処理方法が変更されました動画をご覧ください。Google Chrome も同様の変更を行いました 2018 年 4 月にリリースされました

現在ウェブサイトで動画を自動再生している場合は、新しいポリシーを処理します新しい自動再生の試行コードサンプル動画を自動再生して自動再生が失敗した場合は Click-to-Play です。このガイドでは、新しいサンプルについて説明します。

ブラウザでの自動再生の成功または失敗を検出する

現在、ウェブブラウザには、自動再生を利用できるかどうかを確認する単純なクエリはありません。異なります。動画の自動再生が可能かどうかを確認する唯一の方法は、再生してみてください。

このアプローチを次のコードスニペットに示します。

var contentVideo = document.getElementById('myVideo');
var promise = contentVideo.play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay worked!
  }).catch(error => {
    // Autoplay failed.
  });
}

このコードはまず HTML5 の動画要素の play() を呼び出し、 Promise。このサンプルでは、 Promise は、自動再生機能を検出し、 AdsRequest 適切に分類します

自動再生と IMA

IMA SDK AdsRequest には、自動再生に関連する 2 つのフィールドがあります。供給: setAdWillAutoPlay および setAdWillPlayMuted。前者では、広告サーバーは許可された広告のみを true に設定されている場合は自動再生され、true に設定した場合はミュートまたはミュート解除された状態で開始できる広告のみを返します。このサンプルでは、ブラウザがユーザーの操作に応答するか否かの自動再生がサポートされています。次の 3 つの結果につながる可能性のあるチェックを 2 つ実施します。

このチェックを行うには、コンテンツ動画を再生して、返されたコンテンツを確認します。 Promise:

var adsInitialized, autoplayAllowed, autoplayRequiresMuted;

// Called on page load.
function init() {
  videoContent = document.getElementById('contentElement');
  playButton = document.getElementById('playButton');
  // Hide the play button unless we need click-to-play.
  playButton.style.display = 'none';
  // Add an event listener now in case we need to fall back to click-to-play.
  playButton.addEventListener('click', () => {
    adDisplayContainer.initialize();
    adsInitialized = true;
    videoContent.load();
    playAds();
  });
  // Create your AdsLoader and AdDisplayContainer here.
  setUpIMA();
  // Check if autoplay is supported.
  checkAutoplaySupport();
}

function checkAutoplaySupport() {
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onAutoplayWithSoundSuccess).catch(onAutoplayWithSoundFail);
  }
}

function onAutoplayWithSoundSuccess() {
  // If we make it here, unmuted autoplay works.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function onAutoplayWithSoundFail() {
  // Unmuted autoplay failed. Now try muted autoplay.
  checkMutedAutoplaySupport();
}

function checkMutedAutoplaySupport() {
  videoContent.volume = 0;
  videoContent.muted = true;
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onMutedAutoplaySuccess).catch(onMutedAutoplayFail);
  }
}

function onMutedAutoplaySuccess() {
  // If we make it here, muted autoplay works but unmuted autoplay does not.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = true;
  autoplayChecksResolved();
}

function onMutedAutoplayFail() {
  // Both muted and unmuted autoplay failed. Fall back to click to play.
  videoContent.volume = 1;
  videoContent.muted = false;
  autoplayAllowed = false;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function autoplayChecksResolved() {
  // Request video ads.
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = <YOUR_AD_TAG_URL>;

  ...

  adsRequest.setAdWillAutoPlay(autoplayAllowed);
  adsRequest.setAdWillPlayMuted(autoplayRequiresMuted);
  adsLoader.requestAds(adsRequest);
}

function onAdsManagerLoaded() {
  ...
  if (autoplayAllowed) {
    playAds();
  } else {
    playButton.style.display = 'block';
  }
}

function playAds() {
  try {
    if (!adsInitialized) {
      adDisplayContainer.initialize();
      adsInitialized = true;
    }
    adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
    adsManager.start();
  } catch (adError) {
    videoContent.play();
  }
}

iPhone での自動再生

iPhone で自動再生を行うには、上記のコードに加えて以下が必要です。 playsinline パラメータを動画タグに追加します。

index.html

<body>
  ...
  <video id="contentElement" playsinline muted>
    <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
  </video>
</body>

この HTML の変更により、インライン動画でコンテンツが再生されるようになる iPhone のデフォルトの全画面表示プレーヤーではなく、iPhone 用の全画面表示プレーヤーを使用します。

自動再生広告とオーディオ広告

広告リクエストでオーディオのみの広告が返されるかどうかを検討することが重要です。ミュートで広告が自動再生される可能性があります。もし可能であれば次のいずれかをおすすめします。

動画のみをリクエストするには、次の VAST URL パラメータ ad_type=video を更新してください（動画プレーヤーが動画に対応している場合）。URL パラメータについて詳しくは、こちらのアドマネージャーガイドをご覧ください。
広告をミュート状態で開始するオプションを削除してください。

IMA オーディオ広告ガイドをご覧くださいをご覧ください。