Se usó la API de Cloud Translation para traducir esta página.

Reglas de anuncios

El SDK de IMA HTML5 admite listas de reproducción de anuncios completamente automatizadas. Esta función Inserta pausas publicitarias en el contenido según se especifica en Google Ad Manager cuando coordines anuncios. También simplifica en gran medida el código del reproductor de video necesarios para respaldar las pausas publicitarias, incluidos los anuncios previos al video, durante el video y al final del video.

Cuando se crea el AdsManager, se aplica un contentPlayback El objeto se pasa mediante getAdsManager. llamada. Este objeto debe Tener una propiedad currentTime que muestre el cabezal de reproducción actual posición del video. Si usas un elemento video de HTML5 para lo siguiente: muestra tu contenido, puedes pasar ese elemento al SDK. Este objeto se usa para hacer un seguimiento del progreso de la reproducción del contenido, de manera que se insertarse automáticamente en los momentos especificados en Ad Manager. También debes dejar que el El SDK sabrá que quieres que controle el estado del contenido por ti.
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
```

Para asegurarte de que se reproduzcan los anuncios al final del video, debes informar al SDK cuándo se publica haya finalizado. Esto es un poco complicado, ya que en algunos casos el SDK usa tu para reproducir anuncios, así que debes asegurarte de permitir que el SDK solo sepa cuándo cuando termina tu contenido, no cuando termina un anuncio. Puedes hacerlo con el código a continuación:

var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}

El CONTENT_PAUSE_REQUESTED y CONTENT_RESUME_REQUESTED. se usan para pausar y reanudar el contenido cuando se reproducen las pausas publicitarias.
Si el reproductor de video admite la función arrastrar para buscar, y la propiedad de tiempo actual del el reproductor de video se actualiza mientras el usuario arrastra, el SDK no puede diferenciar entre el contenido que avanza normalmente y un usuario que busca a través del contenido. Debes usar un objeto contentPlayback personalizado como parámetro para getAdsManager. Para ver un ejemplo de este caso de uso, consulta El problema al buscar.

Nota: Cuando el contenido se haya terminado de reproducir o El usuario detuvo la reproducción, asegúrate de llamar a AdsLoader.contentComplete. para indicarle al SDK que el contenido está listo. Luego, el SDK reproduce la pausa publicitaria al final del video, si se programó alguna. El ALL_ADS_COMPLETED el evento se genera cuando se reprodujeron TODAS las pausas publicitarias. Además, ten en cuenta que el seguimiento de contenido comience cuando se llame a init() y deberías siempre llamar a init() antes de reproducir contenido.

Cómo inhabilitar la reproducción automática de pausas publicitarias

En algunas circunstancias, puedes evitar que el SDK reproduzca pausas publicitarias hasta que y estás listo para ellas. En este caso, puedes inhabilitar la reproducción automática de las pausas publicitarias. para permitir que el SDK sepa cuándo estás listo para que se reproduzca una pausa publicitaria. Con este una vez que el SDK carga una pausa publicitaria, se activa AD_BREAK_READY evento. Cuando el reproductor esté listo para que comience la pausa publicitaria puedes llamar a adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Probar

A continuación, puedes ver una implementación funcional.

El problema de buscar

Si utilizas reglas de anuncios, es posible que tengas problemas al hacer clic y arrastrar. Específicamente, después de que un usuario hace clic y arrastra para buscar en un video más allá de varias anuncios durante el video, es posible que vean que 2 o más de ellos se reproducen currículums de contenido. Esto se debe a que el tiempo de reproducción del video se actualiza mientras el que el usuario busca; si el SDK sondea la hora actual mientras el usuario un usuario busca un anuncio, puede pensar que ese anuncio debe reproducirse. Cuando el contenido se reanuda, reproduce el anuncio y, a continuación, el anuncio más reciente desde la búsqueda. Para un visual de este problema, consulta el siguiente diagrama:

La forma más sencilla de resolver esto es ahorrar el tiempo actual cuando el usuario inicia que buscan e informan ese momento cuando el SDK lo solicita hasta que el usuario reanuda la reproducción normal. Para obtener una representación visual de esta solución, consulta el diagrama a continuación:

Con esta solución, omites correctamente el anuncio durante el video de 0:10 y solo reproduces el anuncio durante el video de 0:20. Para ello, usa un rastreador de cabezal de reproducción personalizado, como se muestra a continuación. El siguiente código Contiene modificaciones (en negrita) de ads.js en el formato HTML5 avanzado de muestra disponible en nuestra página de descarga.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Problemas conocidos con Safari para dispositivos móviles

Este método debería funcionar en todas las plataformas, excepto en Safari para dispositivos móviles. En dispositivos móviles Safari, la propiedad de búsqueda de la etiqueta de video no está implementada correctamente (es siempre devuelve un valor falso). Para evitar eso, debes hacer tu propia comprobación para ver si el usuario mira el video. El código de muestra de este método sigue. Nuevamente, las líneas en negrita a continuación son modificaciones en el código existente.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Con estos cambios, el SDK ahora usa la propiedad currentTime de tu Ads objeto para determinar cuándo reproducir pausas publicitarias, no la propiedad currentTime de la reproductor de video de contenido.