O SDK HTML5 do IMA é compatível com playlists de anúncios totalmente automatizadas. Este recurso inserem divisões de anúncio no conteúdo, conforme especificado Google Ad Manager (em inglês) ao programar seus anúncios. Ele também simplifica muito o código do player de vídeo necessário para oferecer suporte a intervalos de anúncios, incluindo precedentes, intermediários e finais.
- Ao criar o
AdsManager
, umcontentPlayback
é transmitido por meio do objeto getAdsManager. a chamada. Esse objeto deve ter uma propriedadecurrentTime
que retorne o marcador atual. do vídeo. Se você estiver usando um elementovideo
HTML5 para exibir seu conteúdo, basta passar esse elemento ao SDK. Este objeto é usado para acompanhar o progresso da reprodução do conteúdo para que os intervalos de anúncio sejam inseridos automaticamente nos horários especificados no Ad Manager. Você também precisa permitir o SDK sabe que você quer que ele processe o estado do conteúdo em seu nome.var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // See API reference for contentPlayback.
- Para garantir que os anúncios finais sejam reproduzidos, você precisa informar ao SDK quando seu conteúdo
for concluído. Isso é um pouco complicado porque, em alguns casos, o SDK usa seu vídeo
para reproduzir anúncios, então você precisa informar apenas ao SDK
seu conteúdo estiver pronto, e não quando um anúncio terminar. Você pode fazer isso usando o
código abaixo:
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); ... }
- O
CONTENT_PAUSE_REQUESTED
eCONTENT_RESUME_REQUESTED
são usados para pausar e retomar o conteúdo quando os intervalos de anúncio são reproduzidos. - Se seu player de vídeo for compatível com o recurso de arrastar para procurar e a propriedade de tempo atual do
o player de vídeo é atualizado enquanto o usuário arrasta, o SDK não consegue diferenciar
entre o progresso normal do conteúdo e um usuário procurá-lo.
É necessário usar um objeto contentPlayback personalizado como parâmetro para
getAdsManager
. Para conferir um exemplo desse caso de uso, consulte O problema ao procurar.
Observação:quando o conteúdo terminar de ser reproduzido ou
o usuário tiver interrompido a reprodução, chame AdsLoader.contentComplete
para sinalizar ao SDK que o conteúdo está pronto. Em seguida, o SDK reproduz
a divisão de anúncio final, se ela tiver sido programada. O ALL_ADS_COMPLETED
é gerado quando TODOS os intervalos comerciais foram reproduzidos. Além disso, observe
que o rastreamento de conteúdo começa quando init()
é chamado.
sempre chamar init()
antes de reproduzir conteúdo.
Como desativar a reprodução automática de intervalos de anúncio
Em alguns casos, convém impedir que o SDK reproduza intervalos de anúncio até
você está pronto para eles. Nesse caso, você pode desativar a reprodução automática de intervalos de anúncio.
para informar ao SDK quando você está pronto para iniciar um intervalo comercial. Com este
do anúncio, assim que o SDK tiver carregado um intervalo de anúncio, ele acionará uma
AD_BREAK_READY
. Quando o player estiver pronto
para iniciar o intervalo de anúncio,
você pode chamar 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(); }
Faça um teste
Confira abaixo uma implementação funcional.
O problema de procurar
Se você usar regras de anúncios, poderá ter problemas com a busca de clicar e arrastar. Especificamente, depois que um usuário clica e arrasta para procurar no vídeo além de várias de anúncios intermediários, eles podem ver dois ou mais desses conjuntos sendo reproduzidos em sequência antes conteúdos são retomados. Isso é causado porque o tempo de reprodução do vídeo é atualizado enquanto o que o usuário está procurando. se o SDK pesquisar o horário atual enquanto o usuário procura um anúncio, ele pode pensar que esse anúncio deve ser reproduzido. Quando o conteúdo é retomado, ele reproduz esse anúncio e, em seguida, o anúncio mais recente desde a busca. Para um representação visual desse problema, consulte o diagrama abaixo:
A maneira mais simples de resolver isso é salvar o tempo atual quando o usuário inicia buscando e relatando o momento da solicitação pelo SDK até que o usuário retoma a reprodução normal. Para uma representação visual desta solução, consulte a diagrama abaixo:
Com essa solução, você pula corretamente o anúncio intermediário de 0:10 e reproduz apenas o de 0:20.
Isso é feito usando um rastreador de marcador personalizado, conforme mostrado abaixo. O código abaixo
contém modificações (mostradas em negrito) de ads.js
no
disponível em nossa
página de download.
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 conhecidos com o Safari para dispositivos móveis
Esse método deve funcionar em todas as plataformas, exceto o Safari para dispositivos móveis. Em dispositivos móveis Safari, a propriedade de busca da tag de vídeo não foi implementada adequadamente (ele sempre retorna falso). Para resolver isso, você precisa fazer sua própria verificação para ver se o usuário está buscando pelo vídeo. O exemplo de código para este método segue. Novamente, as linhas em negrito abaixo são modificações no 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_); };
Com essas mudanças, o SDK passa a usar a propriedade currentTime da sua Ads
para determinar quando reproduzir intervalos comerciais, não a propriedade currentTime
do
player de vídeo de conteúdo.