Reproducción automática

La reproducción automática es compatible en computadoras y en dispositivos web móviles.

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

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

Si actualmente tu sitio web reproduce videos automáticamente, actualiza para manejar estas nuevas políticas. El nuevo Intento de reproducción automática del código muestra muestra cómo intentar reproducir automáticamente un video y recurrir 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 error 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 es compatible o no. La única forma de comprobar si un video se puede reproducir automáticamente es intenta jugarlo.

Este enfoque se demuestra 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 Promise En nuestro ejemplo, Promise se usa para detectar la función de reproducción automática y establecer la AdsRequest apropiadamente.

IMA y reproducción automática

El SDK de IMA AdsRequest tiene dos campos pertinentes a la reproducción automática que debes suministro: setAdWillAutoPlay y setAdWillPlayMuted. La primera garantiza que el servidor de anuncios solo muestre anuncios se reproducirá automáticamente (si se establece en verdadero), y este último garantiza que el servidor solo muestra anuncios que pueden iniciarse con el estado silenciado o activado. En nuestro ejemplo, se usa el video de contenido como indicador para saber si el navegador admite la reproducción automática. Realiza dos comprobaciones que lleven a tres resultados potenciales:

Para hacer estas verificaciones, reproduce el video de contenido y revisa los 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();
  }
}

Reproducción automática en iPhone

Además del código anterior, la reproducción automática en iPhone requiere que para agregar el parámetro playsinline a su 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 video intercalado. en el iPhone, en lugar del reproductor en pantalla completa predeterminado de iPhone.

Reproducción automática y anuncios de audio

Es importante considerar si una solicitud de anuncio mostrará anuncios solo de audio existe la posibilidad de que sus anuncios se reproduzcan automáticamente silenciados. Si hay esta posibilidad, te recomendamos una de las siguientes opciones:

• Actualiza el siguiente parámetro de URL de VAST ad_type=video para solicitar solo video anuncios (si el reproductor es compatible con el video). 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 a silenciarse.

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