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 uncontentPlayback
El objeto se pasa mediante getAdsManager. llamada. Este objeto debe Tener una propiedadcurrentTime
que muestre el cabezal de reproducción actual posición del video. Si usas un elementovideo
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
yCONTENT_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:
![](https://developers.google.cn/static/interactive-media-ads/images/seeking_issue.jpg?authuser=19&hl=es-419)
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:
![](https://developers.google.cn/static/interactive-media-ads/images/seeking_fix.jpg?authuser=19&hl=es-419)
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.