Skip to main content

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

Em seguida, mostramos-lhe como integrar o código no seu sítio, consoante o leitor de vídeo que estiver a utilizar.

Remember to replace the XXXXXX value with the Zone ID of the ad zone you created in Step 1.

Leitor de fluidos​

Player website

<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"
                    }
                ]
            }
        }
    );

JWPlayer versão 6+ (integração personalizada)​

Player website


<div id="my-video"></div>
<script type="text/javascript">
jwplayer("my-video").setup({
/**** ADVERTISING SECTION STARTS HERE ****/
advertising: {
  client: "vast",
  schedule: {
    "myAds": {
      "offset": "pre",
      "tag": "https://s.magsrv.com/v1/vast.php?idzone=XXXXXXX"
      }
    }
  },
  /**** ADVERTISING SECTION ENDS HERE ****/
  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 o JWPlayer versão 6+ (não a versão gratuita) e apenas se um único JWPlayer for colocado na página.

Video.js (integração personalizada)​

Player website


<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">Video.js VAST plugin examples.</p>
<div class="example-video-container">
<p class="description">No autoplay.</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>Video Playback Not Supported</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>

Flowplayer (integração personalizada)​

Player website

<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 leitor requer uma subscrição paga.

Resolução de problemas​

Depois de adicionar estes códigos e substituir o ID da zona pelo seu, deve começar a mostrar anúncios imediatamente.

In the next section of our guide, we will offer some basic troubleshooting steps in case this is not happening. Click here to continue

Also, if your player or version is not listed contact our Customer Success team selecting Technical Assistance from the contact form here.