Reproducción automática

La reproducción automática es compatible con computadoras y dispositivos de la Web móvil.

A partir de Chrome 53 e iOS 10, Android e iPhone admiten la reproducción automática silenciada intercalada.

Safari 11 para computadoras cambió la forma en que controla los videos de reproducción automática. Google Chrome realizó un cambio similar en abril de 2018.

Si tu sitio web reproduce automáticamente videos, actualízalo para que maneje estas políticas nuevas. El nuevo ejemplo de código de intento de reproducción automática demuestra cómo intentar reproducir un video de forma automática y volver a la opción de hacer clic para reproducir si falla la reproducción automática. En esta guía, se explica el nuevo ejemplo.

Cómo detectar el éxito o el fracaso de la reproducción automática en un navegador

Actualmente, los navegadores web no ofrecen una consulta simple para verificar si la reproducción automática es compatible o no. La única manera de comprobar si un video se puede reproducir automáticamente es intentar reproducirlo.

Este enfoque se muestra en el siguiente fragmento de código:

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

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

El código primero llama a play() en un elemento de video HTML5 que muestra un objeto Promise. En nuestro ejemplo, se usa Promise para detectar la capacidad de reproducción automática y establecer el AdsRequest de forma correcta.

IMA y reproducción automática

El SDK de IMA AdsRequest tiene dos campos pertinentes a la reproducción automática que debes proporcionar: setAdWillAutoPlay y setAdWillPlayMuted. El primero garantiza que el servidor de anuncios solo muestre anuncios que puedan reproducirse automáticamente (si se configura como verdadero) y el segundo garantiza que el servidor de anuncios solo muestre anuncios que pueden iniciarse en un estado silenciado o con sonido activado. En nuestro ejemplo, se usa el video de contenido como un indicador de si el navegador admite o no la reproducción automática. Realiza dos verificaciones que generen tres resultados posibles:

Para realizar estas verificaciones, intenta reproducir el video de contenido y observa el Promise que se muestra:

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

Reproducción automática en iPhone

Además del código anterior, la reproducción automática en iPhone requiere que agregues el parámetro playsinline a tu etiqueta de video.

index.html

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

Este cambio en el código HTML garantiza que tu contenido se reproduzca en un reproductor de video intercalado en iPhone, en lugar de en el reproductor de pantalla completa predeterminado de iPhone.

Anuncios de audio y reproducción automática

Es importante considerar si una solicitud de anuncio mostrará anuncios de solo audio si existe la posibilidad de que se reproduzcan de forma automática de forma automática. Si existe esa posibilidad, te recomendamos una de las siguientes opciones:

• Actualiza el siguiente parámetro de URL de VAST ad_type=video para solicitar solo anuncios de video (si tu reproductor es compatible con videos). Para obtener más información sobre los parámetros de URL, consulta esta guía de Ad Manager.
• Quita la opción para que los anuncios comiencen silenciados.

Consulta la guía de anuncios de audio de IMA para obtener más información sobre las integraciones de audio de IMA.