In-Stream: Como implementar In-Stream. Parte 2: Exemplos de implementação

Abaixo mostramos como integrar o código no seu site, dependendo do leitor de vídeo que está a usar.

Lembre-se de substituir o valor XXXXXX pelo ID da zona da zona de anúncios que criou em Passo 1.

<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

<video id="my-video" controls style="width: 640px; height: 360px;">
    <source src="main_video.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
    var testVideo = fluidPlayer(
        "my-video",
        {
            vastOptions: {
                adList: [
                    {
                        roll: "preRoll",
                        vastTag: "https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX"
                    },
                    {
                        roll: "midRoll",
                        vastTag: "https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX",
                        timer: 8
                    },
                    {
                        roll: "midRoll",
                        vastTag: "https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX",
                        timer: 10
                    },
                    {
                        roll: "postRoll",
                        vastTag: "https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX"
                    }
                ]
            }
        }
    );

Site do player

<div id="my-video"></div>
<script type="text/javascript">
jwplayer("my-video").setup({
/**** A SECÇÃO DE PUBLICIDADE COMEÇA AQUI ****/
advertising: {
  client: "vast",
  schedule: {
    "myAds": {
      "offset": "pre",
      "tag": "https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX"
      }
    }
  },
  /**** A SECÇÃO DE PUBLICIDADE TERMINA AQUI ****/
  file: "http://content.jwplatform.com/videos/Wf8BfcSt-kNspJqnJ.mp4",
  image: "http://content.jwplatform.com/thumbs/Wf8BfcSt-640.jpg",
  width: "580",
  height: "370"
});
</script>

Nota: Só funcionará com a versão 6+ do JWPlayer (não a versão gratuita) e apenas se for colocado um único JWPlayer na página.

Site do player

<head>
<link href="http://vjs.zencdn.net/4.7.1/video-js.css" rel="stylesheet">
<link href="lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
<link href="videojs.vast.css" rel="stylesheet" type="text/css">
<style type="text/css">
.description {
  background-color:#eee;
  border: 1px solid #777;
  padding: 10px;
  font-size: .8em;
  line-height: 1.5em;
  font-family: Verdana, sans-serif;
}
.example-video-container {
  display: inline-block;
}
</style>
<!--[if lt IE 9]><script src="lib/es5.js"></script>-->
<script src="http://vjs.zencdn.net/4.7.1/video.js">
<script src="lib/videojs-contrib-ads/videojs.ads.js">
<script src="lib/vast-client.js">
<script src="videojs.vast.js">
<body>
<p class="description">Exemplos do plugin VAST do Video.js.</p>
<div class="example-video-container">
<p class="description">Sem reprodução automática.</p>
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup=’{}’
  width=’640’
  height=’400’
>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type=’video/mp4’ >
<source src="https://vjs.zencdn.net/v/oceans.webm" type=’video/webm’ >
<p>Reprodução de vídeo não suportada</p>
</video>
</div>
<script>
  var vid1 = videojs(‘vid1’)
  vid1.muted(true);
  vid1.ads();
  vid1.vast({
  url: ‘https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX’
});
</script>
</body>

Site do player

<head>
<link rel="stylesheet" href="https://releases.flowplayer.org/7.2.4/skin/skin.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
<script src="https://releases.flowplayer.org/7.2.4/flowplayer.min.js">
<script src="http://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js">
<script src="http://imasdk.googleapis.com/js/sdkloader/ima3.js">
<script src="https://releases.flowplayer.org/vast/goshow.tv/vast.min.js">
<style type="text/css" dangerouslySetInnerHTML={{__html: ".flowplayer {  background-image: url(//flowplayer.com/media/img/logo-blue.png);  background-size: 95%;  background-color: #6496ff;  -webkit-box-shadow: 0 0 20px #b8b8b8;  -moz-box-shadow: 0 0 20px #b8b8b8;  box-shadow: 0 0 20px #b8b8b8;  width: 640px;}--><!--" }}>

<script>
window.onload = function ();
    flowplayer("#vast", ;
    splash: true,
    ratio: 9/16,
    customPlaylist: true,
    playlist: [&lcub;
    ima: &lcub;
    ads: [&lcub;
    time: 10,
    adTag: ‘https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX’
;],
;,
  sources: [
type: "application/x-mpegurl", src: "//edge.flowplayer.org/drive.m3u8";,
type: "video/mp4", src: "//edge.flowplayer.org/drive.mp4";
    ]
;]
;);
;;
</script>
<div id="vast" />

Nota: Este player requer uma subscrição paga.

Resolução de problemas

Depois de adicionar estes códigos e substituir o ID da zona pelo seu, os anúncios devem começar a ser exibidos de imediato.

Na próxima secção do nosso guia, ofereceremos alguns passos básicos de resolução de problemas caso isso não aconteça. Clique aqui para continuar

Além disso, se o seu player ou versão não estiver listado, contacte a nossa equipa de Customer Success selecionando Assistência técnica no formulário de contacto aqui.

AnteriorIn-Stream: Como implementar In-Stream Parte 1.SeguinteIn-Stream: Como implementar In-Stream. Parte 3: Testar a zona de anúncio

Última atualização há 14 dias

Isto foi útil?