Autoplay

Autoplay wird auf Computern und Mobilgeräten unterstützt.

Ab Chrome 53 und iOS 10 unterstützen Android und iPhone Autoplay ohne Ton.

Bei Safari 11 für den Desktop wurde die Verarbeitung von Autoplay-Videos geändert. Google Chrome hat im April 2018 eine ähnliche Änderung vorgenommen.

Wenn auf Ihrer Website derzeit Videos automatisch abgespielt werden, passen Sie sie entsprechend an. Das neue Codebeispiel für die automatische Wiedergabe zeigt, wie du versuchst, ein Video automatisch abzuspielen und auf Click-to-Play zurückzugreifen, wenn die Autoplay-Funktion fehlschlägt. Dieser Leitfaden führt Sie durch das neue Beispiel.

Erfolg oder Misserfolg der automatischen Wiedergabe in einem Browser erkennen

Derzeit bieten Webbrowser keine einfache Abfrage an, um zu prüfen, ob Autoplay unterstützt wird. Die einzige Möglichkeit, um zu prüfen, ob ein Video automatisch wiedergegeben werden kann, besteht darin, es abzuspielen.

Dieser Ansatz wird im folgenden Code-Snippet veranschaulicht:

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

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

Mit dem Code wird zuerst play() für ein HTML5-Videoelement aufgerufen, das ein Promise zurückgibt. In unserem Beispiel wird Promise verwendet, um die Funktion für die Autoplay-Funktion zu erkennen und die AdsRequest entsprechend festzulegen.

Autoplay und IMA

Im IMA SDK AdsRequest gibt es zwei für Autoplay relevante Felder, die Sie angeben müssen: setAdWillAutoPlay und setAdWillPlayMuted. Mit Ersterem wird sichergestellt, dass der Ad-Server nur Anzeigen zurückgibt, die automatisch wiedergegeben werden dürfen (falls er auf „true“ gesetzt ist). Letztere sorgt dafür, dass der Ad-Server nur Anzeigen zurückgibt, die stummgeschaltet oder ohne Stummschaltung gestartet werden dürfen. In unserem Beispiel wird anhand des Inhaltsvideos angegeben, ob der Browser Autoplay unterstützt. Führen Sie zwei Prüfungen durch, die zu drei möglichen Ergebnissen führen:

Versuchen Sie, das Inhaltsvideo abzuspielen, und sehen Sie sich das zurückgegebene Promise an, um diese Überprüfungen durchzuführen:

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

Autoplay auf dem iPhone

Zusätzlich zum vorherigen Code müssen Sie für die Autoplay-Funktion auf dem iPhone dem Video-Tag den Parameter playsinline hinzufügen.

index.html

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

Durch diese HTML-Änderung wird sichergestellt, dass deine Inhalte auf dem iPhone in einem Inline-Videoplayer statt im standardmäßigen Vollbildplayer des iPhones wiedergegeben werden.

Autoplay und Audioanzeigen

Sie sollten überlegen, ob bei einer Anzeigenanfrage Nur-Audio-Anzeigen zurückgegeben werden, wenn die Möglichkeit besteht, dass Ihre Anzeigen automatisch stummgeschaltet wiedergegeben werden. Wenn dies der Fall ist, empfehlen wir eine der folgenden Optionen:

• Aktualisieren Sie den folgenden VAST-URL-Parameter ad_type=video, damit nur Videoanzeigen angefordert werden können, wenn Ihr Player Videos unterstützt. Weitere Informationen zu URL-Parametern finden Sie in diesem Ad Manager-Leitfaden.
• Die Option für den stummgeschalteten Start von Anzeigen entfernen.

Weitere Informationen zu IMA-Audioanzeigen finden Sie im Leitfaden für IMA-Audioanzeigen.