Reprodução automática

A reprodução automática é compatível com computadores e dispositivos móveis na Web.

A partir do Chrome 53 e do iOS 10, o Android e o iPhone são compatíveis com a reprodução automática inline silenciada.

O Safari 11 para computador mudou a forma de processar vídeos de reprodução automática. O Google Chrome fez uma mudança semelhante em abril de 2018.

Se o seu site reproduz vídeos automaticamente, atualize-o para lidar com essas novas políticas. A nova amostra de código de tentativa de reprodução automática mostra como tentar reproduzir um vídeo automaticamente e voltar ao clicar para reproduzir se a reprodução falhar. Este guia orienta você pelo novo exemplo.

Detectar o sucesso ou a falha na reprodução automática em um navegador

Atualmente, os navegadores da Web não oferecem uma consulta simples para verificar se a reprodução automática é compatível ou não. A única maneira de conferir se um vídeo pode ser reproduzido automaticamente é tentando reproduzi-lo.

Essa abordagem é demonstrada no snippet de código a seguir:

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

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

Primeiro, o código chama play() em um elemento de vídeo HTML5 que retorna uma Promise. No nosso exemplo, o Promise é usado para detectar o recurso de reprodução automática e definir o AdsRequest adequadamente.

Reprodução automática e IMA

O SDK do IMA AdsRequest tem dois campos pertinentes à reprodução automática que você precisa fornecer: setAdWillAutoPlay e setAdWillPlayMuted. O primeiro garante que o servidor de anúncios retorne apenas anúncios que possam ser reproduzidos automaticamente (se definido como verdadeiro), e o segundo garante que o servidor de anúncios retorne apenas anúncios que podem ser iniciados no estado com ou sem som. Nosso exemplo usa o conteúdo de vídeo como um indicador da compatibilidade com a reprodução automática no navegador. Faça duas verificações que levam a três possíveis resultados:

Para fazer essas verificações, tente reproduzir o conteúdo de vídeo e observe o Promise retornado:

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

Reprodução automática no iPhone

Além do código anterior, a reprodução automática no iPhone exige que você adicione o parâmetro playsinline à sua tag de vídeo.

index.html

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

Essa mudança no HTML garante que seu conteúdo seja exibido em um player de vídeo inline no iPhone, e não no player de tela cheia padrão do iPhone.

Anúncios em áudio e reprodução automática

É importante considerar se uma solicitação de anúncio retornará anúncios somente em áudio se houver a possibilidade de os anúncios serem reproduzidos automaticamente sem som. Nesse caso, recomendamos uma das seguintes opções:

• Atualize o seguinte parâmetro de URL VAST ad_type=video para solicitar somente anúncios em vídeo (se o player for compatível com vídeo). Para mais informações sobre parâmetros de URL, consulte este guia do Ad Manager.
• Remova a opção para que os anúncios comecem silenciados.

Consulte o guia de anúncios em áudio do IMA para mais informações sobre integrações de áudio do IMA.