El SDK de IMA HTML5 admite listas de reproducción de anuncios completamente automatizadas. Esta función inserta pausas publicitarias en el contenido como se especifica en Google Ad Manager cuando se coordina el tráfico de tus anuncios. También simplifica en gran medida el código del reproductor de video necesario para admitir pausas publicitarias, incluidos los anuncios previos al video, durante el video y al final del video.
- Cuando se crea el
AdsManager
, se pasa un objetocontentPlayback
mediante la llamada getAdsManager. Este objeto debe tener una propiedadcurrentTime
que muestre la posición actual del cabezal de reproducción del video. Si usas un elementovideo
de HTML5 para mostrar tu contenido, puedes pasar ese elemento al SDK. Se usa para hacer un seguimiento del progreso de la reproducción de contenido, de modo que las pausas publicitarias se inserten automáticamente en los momentos especificados en Ad Manager. También debes informarle al SDK que quieres que maneje 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 anuncios al final del video, debes informar al SDK cuando termine el contenido. Esto es un poco complicado, ya que, en algunos casos, el SDK usa tu reproductor de video para reproducir anuncios. Por ello, debes asegurarte de informar al SDK solo cuando termine el contenido y no cuando finalice un anuncio. Puedes hacerlo con el siguiente código:
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); ... }
- Los eventos
CONTENT_PAUSE_REQUESTED
yCONTENT_RESUME_REQUESTED
se usan para pausar y reanudar el contenido cuando se reproducen las pausas publicitarias. - Si tu reproductor de video admite la función de arrastrar para buscar y la propiedad de tiempo actual del reproductor de video se actualiza mientras el usuario arrastra, el SDK no puede diferenciar entre 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 con la búsqueda.
Nota: Cuando el contenido termine de reproducirse o el usuario haya detenido la reproducción, asegúrate de llamar a AdsLoader.contentComplete para indicarle al SDK que el contenido terminó. Luego, el SDK reproduce la pausa publicitaria al final del video, si se programó. El evento ALL_ADS_COMPLETED
se genera cuando se reproducen TODAS las pausas publicitarias. Además, ten en cuenta que el seguimiento de contenido comienza cuando se llama a init()
y siempre debes llamar a init()
antes de reproducir contenido.
Cómo inhabilitar la reproducción automática de pausas publicitarias
En algunas circunstancias, es posible que quieras evitar que el SDK reproduzca pausas publicitarias hasta que estés listo para ellas. En este caso, puedes inhabilitar la reproducción automática de pausas publicitarias para permitir que el SDK sepa cuándo quieres que se reproduzca una pausa publicitaria. Con esta
configuración, una vez que el SDK carga una pausa publicitaria, se activa un
evento AD_BREAK_READY
. 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 con buscar
Si usa reglas de anuncios, es posible que tenga problemas con la búsqueda de hacer clic y arrastrar. Específicamente, después de que un usuario hace clic y arrastra para buscar por el video más allá de varios Pods de anuncios durante el video, es posible que vea 2 o más de esos Pods de reproducción consecutivos antes de que se reanude el contenido. Esto se debe a que el tiempo de reproducción de video se actualiza mientras el usuario lo busca. Si el SDK sondea la hora actual mientras el usuario busca la hora actual, es posible que piense que ese anuncio debería reproducirse. Cuando se reanuda el contenido, se reproduce ese anuncio y, luego, el anuncio más reciente desde la búsqueda. Para obtener una representación visual de este problema, consulta el siguiente diagrama:
La manera más sencilla de solucionar este problema es guardar el tiempo actual cuando el usuario comienza a buscar y, luego, informar ese tiempo cuando el SDK lo solicita hasta que el usuario reanude la reproducción normal. Para obtener una representación visual de esta solución, consulta el siguiente diagrama:
Con esta solución, puedes omitir correctamente el anuncio durante el video de 0:10 y solo reproducir el de 0:20 durante el video.
Para ello, se usa un seguimiento de cabezal de reproducción personalizado, como se muestra a continuación. El siguiente código contiene modificaciones (en negrita) de ads.js
en la muestra avanzada de HTML5 disponible en nuestra página de descargas.
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 Safari para dispositivos móviles, la propiedad de búsqueda de la etiqueta de video no se implementó correctamente (siempre muestra "false"). Para evitarlo, debes hacer tu propia comprobación y ver si el usuario está buscando a través del video. A continuación, se incluye el código de muestra para este método. Una vez más, las líneas en negrita que aparecen 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 objeto Ads
para determinar cuándo reproducir las pausas publicitarias, y no la propiedad currentTime
del reproductor de video de contenido.