Como funciona: em todos os cenários, o DivulAds recebe o
Substitua
token da sua posição de vídeo pré-roll,
busca um anúncio elegível (respeitando cloaker, freq cap e min-quality) e toca antes do seu conteúdo original.
O botão "Pular" aparece automaticamente após 5s. Se não houver ad disponível, o player toca direto o conteúdo do site.
Substitua
SEU_TOKEN pelo token da sua posição (aparece na tela do site em "Snippets por posição").
1
Player HTML5 nativo
A forma mais simples. Sem biblioteca externa — funciona em qualquer navegador moderno.
Snippet
<!-- DivulAds vídeo pré-roll: substitua sua tag <video> por esta <div> -->
<div class="divulads-player"
data-token="SEU_TOKEN"
data-src="URL_DO_SEU_VIDEO.mp4"
data-poster="thumb.jpg"
data-autoplay="1"></div>
<script async src="https://aimads.pro/divulads-player.js"></script>
Rodando de verdade
Se você já tinha uma tag
<video src="X.mp4">, é só trocar por essa <div> com data-src="X.mp4". O script cuida do resto.
2
Video.js
Player open-source popular em portais de notícias e streaming.
Snippet
<video-js id="meu-player" controls preload="auto"></video-js>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script async src="https://aimads.pro/divulads-player.js"></script>
<script>
const player = videojs('meu-player');
DivulAdsPreroll.request({ token: 'SEU_TOKEN' }).then(function (ad) {
// Sem ad? toca conteúdo direto
if (!ad) { player.src('URL_DO_SEU_VIDEO.mp4'); player.play(); return; }
// Toca o ad primeiro
player.src({ src: ad.video_url, type: 'video/mp4' });
player.one('play', () => ad.reportEvent('video_start'));
player.on ('timeupdate', () => ad.reportQuartile(player.currentTime(), player.duration()));
player.one('ended', () => {
ad.reportEvent('video_complete');
player.src('URL_DO_SEU_VIDEO.mp4'); player.play();
});
player.play();
});
</script>
Rodando de verdade
3
Plyr
Player leve e customizável, comum em blogs e sites institucionais.
Snippet
<video id="meu-video" playsinline controls></video>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<script async src="https://aimads.pro/divulads-player.js"></script>
<script>
const player = new Plyr('#meu-video');
DivulAdsPreroll.request({ token: 'SEU_TOKEN' }).then(function (ad) {
const playContent = () => { player.source = { type: 'video', sources: [{ src: 'URL_DO_SEU_VIDEO.mp4' }] }; player.play(); };
if (!ad) { playContent(); return; }
player.source = { type: 'video', sources: [{ src: ad.video_url }] };
player.once('playing', () => ad.reportEvent('video_start'));
player.on ('timeupdate', () => ad.reportQuartile(player.currentTime, player.duration));
player.once('ended', () => { ad.reportEvent('video_complete'); playContent(); });
player.play();
});
</script>
Rodando de verdade
4
JW Player
Player comercial premium usado por grandes veículos.
Snippet
<div id="meu-player"></div>
<script src="https://cdn.jwplayer.com/libraries/SEU_ACCOUNT_KEY.js"></script>
<script async src="https://aimads.pro/divulads-player.js"></script>
<script>
const jw = jwplayer('meu-player').setup({ width: '100%', aspectratio: '16:9' });
DivulAdsPreroll.request({ token: 'SEU_TOKEN' }).then(function (ad) {
const playContent = () => { jw.load([{ file: 'URL_DO_SEU_VIDEO.mp4' }]).play(); };
if (!ad) { playContent(); return; }
jw.load([{ file: ad.video_url }]);
jw.once('firstFrame', () => ad.reportEvent('video_start'));
jw.on ('time', (e) => ad.reportQuartile(e.position, e.duration));
jw.once('complete', () => { ad.reportEvent('video_complete'); playContent(); });
jw.play();
});
</script>
Rodando de verdade
5
YouTube / Vimeo embedado
Iframes de terceiros — como fazer o pré-roll rodar antes.
Limitação: não conseguimos injetar o ad dentro do iframe do YouTube/Vimeo (política deles).
A técnica é bloquear o iframe até o ad terminar: mostramos o vídeo do anúncio num overlay e só depois liberamos o iframe original.
Snippet
<div class="divulads-preroll-wrapper" data-token="SEU_TOKEN">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=0"
width="100%" height="400" frameborder="0" allowfullscreen></iframe>
</div>
<script async src="https://aimads.pro/divulads-player.js"></script>
<!-- O script detecta .divulads-preroll-wrapper com iframe, cobre com o ad
e libera o iframe (com autoplay=1) quando o ad termina ou é pulado. -->
Rodando de verdade
6
API custom (Promise)
Qualquer player que você queira integrar — recebe os dados do ad e você decide como tocar.
Snippet
<script async src="https://aimads.pro/divulads-player.js"></script>
<script>
// Chame ANTES de tocar seu conteúdo original
DivulAdsPreroll.request({ token: 'SEU_TOKEN' }).then(function (ad) {
if (!ad) { seuPlayer.playConteudo(); return; }
// Toca o ad no seu player custom
seuPlayer.playAd(ad.video_url, {
skipAfter: ad.skip_after, // segundos até "Pular" aparecer
onClick: () => { window.open(ad.click_url, '_blank'); ad.reportEvent('click'); },
onStart: () => ad.reportEvent('video_start'),
onQuartile: (q) => ad.reportEvent('video_' + q + 'pct'), // q = 25|50|75
onComplete: () => { ad.reportEvent('video_complete'); seuPlayer.playConteudo(); },
onSkip: () => { ad.reportEvent('video_skip'); seuPlayer.playConteudo(); },
});
});
</script>
Payload do
ad
{
"campaign_id": 42,
"creative_id": 128,
"video_url": "https://divulads.com/media/video-creative/128",
"duration": 30, // segundos
"click_url": "https://divulads.com/api/site/click?token=...&c=42",
"skip_after": 5, // segundos até botão "Pular"
"position_id": 15,
"token": "abc123..."
}
ad.reportEvent(nome) registra o evento no DivulAds (contabiliza métricas + comissão). Sempre chame nos momentos-chave (start, 25/50/75%, complete, skip, click).
Rodando de verdade
Dica pra publisher: depois de colar, abra seu site em uma aba anônima (pra não cair em freq cap) e olhe o console do navegador — o script loga cada request e resposta.
Se ver
no-video-fit ou invalid-position, é anti-fraude ou config errada.