Autoodtwarzanie

Autoodtwarzanie jest obsługiwane na komputerach i na urządzeniach mobilnych.

Od wersji Chrome 53 i iOS 10 Android i iPhone obsługują wbudowane wyciszone autoodtwarzanie.

Safari 11 na komputery zmieniła sposób obsługi filmów z autoodtwarzaniem. Podobną zmianęwprowadziliśmy w Google Chrome w kwietniu 2018 roku.

Jeśli Twoja witryna automatycznie odtwarza filmy, zaktualizuj ją, by obsługiwała nowe zasady. Nowy przykładowy kod Próba autoodtwarzania pokazuje, jak uruchomić autoodtwarzanie filmu, aby użyć opcji „kliknij, aby odtworzyć”, jeśli autoodtwarzanie się nie powiedzie. W tym przewodniku znajdziesz omówienie nowego przykładu.

Wykrywanie powodzenia lub niepowodzenia autoodtwarzania w przeglądarce

Obecnie przeglądarki internetowe nie udostępniają prostego zapytania pozwalającego sprawdzić, czy autoodtwarzanie jest obsługiwane. Jedynym sposobem, aby sprawdzić, czy film może odtwarzać się automatycznie, jest spróbowanie go odtworzyć.

Zostało to przedstawione w tym fragmencie kodu:

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

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

Kod najpierw wywołuje play() w elemencie wideo HTML5, który zwraca Promise. W naszym przykładzie komponent Promise wykrywa możliwość autoodtwarzania i ustawia AdsRequest.

Autoodtwarzanie i IMA

Pakiet IMA SDK AdsRequest zawiera 2 pola związane z autoodtwarzaniem, które są niezbędne: setAdWillAutoPlay i setAdWillPlayMuted. Pierwsze z nich gwarantuje, że serwer reklam zwraca tylko reklamy, które mogą być automatycznie odtwarzane (jeśli ma wartość Prawda), a drugi – tylko te reklamy, które mogą być uruchamiane z wyciszonym lub wyłączonym dźwiękiem. W naszym przykładzie użyto filmu jako wskaźnika, czy przeglądarka obsługuje autoodtwarzanie. Wykonaj 2 kontrole, które prowadzą do trzech potencjalnych wyników:

Aby to sprawdzić, spróbuj odtworzyć film i sprawdzić zwrócone 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();
  }
}

Autoodtwarzanie na iPhonie

Oprócz poprzedniego kodu funkcja autoodtwarzania na iPhonie wymaga dodania do tagu wideo parametru playsinline.

index.html

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

Dzięki tej zmianie w kodzie HTML Twoje treści będą odtwarzane we wbudowanym odtwarzaczu wideo na iPhonie, a nie w domyślnym odtwarzaczu pełnoekranowym.

Reklamy autoodtwarzane i reklamy audio

Rozważając, czy żądanie reklamy nie zwróci reklam tylko dźwiękowych, jeśli istnieje możliwość, że zostaną automatycznie wyciszone. Jeśli masz taką możliwość, zalecamy wykonanie jednej z tych czynności:

• Zaktualizuj poniższy parametr adresu URL VAST ad_type=video, by wysyłać żądania tylko reklam wideo (jeśli Twój odtwarzacz obsługuje wideo). Więcej informacji o parametrach adresów URL znajdziesz w tym przewodniku po usłudze Ad Manager.
• Usuń tę opcję, aby reklamy były wyciszone.

Więcej informacji o integracji IMA audio znajdziesz w przewodniku po reklamach audio IMA.