Start a conversation

How to implement In-Stream Part 2 - Implementation examples

Below we show you how to integrate the code into your site, depending on the video player you are using.  Remember to use your own Ad zone ID when completing Step 1

Fluid Player- Website here

<link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer.com/v2/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://syndication.exoclick.com/splash.php?idzone=0000000"
                    },
                    {
                        roll: "midRoll",
                        vastTag: "https://syndication.exoclick.com/splash.php?idzone=0000000",
                        timer: 8
                    },
                    {
                        roll: "midRoll",
                        vastTag: "https://syndication.exoclick.com/splash.php?idzone=0000000",
                        timer: 10
                    },
                    {
                        roll: "postRoll",
                        vastTag: "https://syndication.exoclick.com/splash.php?idzone=0000000"
                    }
                ]
            }
        }
    );

idzone=0000000 is an example ID only-  use the number generated from your own ad zone!

JWPlayer Version 6+(Custom integration) Website here

IMPORTANT NOTE: 

It will not work in Version 7, above 7.11.1. We recommend you upgrade to Version 8

<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://syndication.exoclick.com/splash.php?idzone=0000000”
}
}
},
/**** 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>

idzone=0000000 is an example ID only-  use the number generated from your own ad zone!
NOTE: It will only work with JWPlayer version 6+ (not the free version) and only if a single JWPlayer is placed on the page.

Video.js(Custom Integration) Website here

PART 1
<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><![endif]-->
<script src=”http://vjs.zencdn.net/4.7.1/video.js”></script>
<script src=”lib/videojs-contrib-ads/videojs.ads.js”></script>
<script src=”lib/vast-client.js”></script>
<script src=”videojs.vast.js”></script>
</head>
PART 2
<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://syndication.exoclick.com/splash.php?idzone=0000000’
});
</script>
</body>

idzone=0000000 is an example ID only-  use the number generated from your own ad zone!

Flowplayer(Custom integration) - Requires a player subscription! Website here

PART 1
<head>
<!-- the player skin -->
<link rel=”stylesheet” href=”https://releases.flowplayer.org/7.2.4/skin/skin.css”>
<!-- jQuery is required for video tag based setups only -->
<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>
<!-- Flowplayer -->
<script src=”https://releases.flowplayer.org/7.2.4/flowplayer.min.js”></script>
<!-- optional for this demo: Flowplayer hlsjs engine (light) -->
<script src=”http://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js”></script>
<!-- load VAST assets after Flowplayer assets -->
<!-- IMA sdk -->
<script src=”http://imasdk.googleapis.com/js/sdkloader/ima3.js”></script>
<!-- Flowplayer vast plugin -->
<script src=”https://releases.flowplayer.org/vast/goshow.tv/vast.min.js”></script>
<style type=”text/css”>
.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;
}
PART 2
</style>
<script>
window.onload = function () {
flowplayer(“#vast”, {
splash: true,
ratio: 9/16,
customPlaylist: true,
playlist: [{
ima: {
ads: [{
time: 10,
adTag: ‘https://syndication.exoclick.com/splash.php?idzone=0000000’
}],
},
sources: [
{ type: “application/x-mpegurl”, src: “//edge.flowplayer.org/drive.m3u8” },
{ type: “video/mp4”, src: “//edge.flowplayer.org/drive.mp4” }
]
}]
});
};
</script>
</head>
<body>
<div id=”vast”></div>
</body>

idzone=0000000 is an example ID only-  use the number generated from your own ad zone!

Click HERE for part 3 of this tutorial or for......

Additional help!

If your player or version is not listed contact our Client Care team selecting "Technical Assistance" from the contact form here!

Choose files or drag and drop files