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
<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)
<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)
<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)
<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: [{
ima: {
ads: [{
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.