Preroll video example

Preroll video through videojs with Nuevo plugin

The vroll plugin allows you to play preroll, midroll, and postroll multiple video ads. For the preroll video ad, you should set set the timeOffset equal to 0 or = start. You can also skip the timeOffset at all.
If you plan to use only pre-roll video, the example code setup should look like this:

Code snippet

<script>
var player=videojs('player_1');
player.nuevo({
//possible nuevo plugin options here
});
player.vroll({
src:"//yourdomain.com/video.mp4",
type: "video/mp4",
href: "url-to-go-on-preroll-click",
offset:0,
skip: 5 //optional skip video option.
id=1 //optional preroll video ID if you wish to track ad action.
});
</script>

If you plan to use pre-roll video, mid-roll video, and/or post-roll video, you must define an array of ad videos. See the code example below.

Code snippet

<script>
var player=videojs('player_1');
player.nuevo({
//possible nuevo plugin options here
});
var ads_array = [
{
src:"//path-to-preroll_video.mp4",
type: "video/mp4",
href: "url-to-go-on-preroll-click",
offset:0,
skip: 5
id= "1"
},
src:"//yourdomain.com/midroll_video.mp4",
type: "video/mp4",
href: "url-to-go-on-midroll-click",
offset:30,
skip: 5
id: "2"
},
src:"//yourdomain.com/postroll_video.mp4",
type: "video/mp4",
href: "url-to-go-on-postroll-click",
offset:'100%',
skip: 5
id: "3"
}
]);
player.vroll( ads_array)
</script>

How to track preroll video playback and click

Tracking video ad is the same for preroll, midroll, and postroll video. The Javascript function looks like this:

Code snippet

<script>player.on('vroll', function(event, data) {
var ad_id = data.id;
var action = data.action;
});
</script>

Possible action values are: 'start', 'play', 'paused', 'skipped', 'completed', and 'clicked'.
You can make use of the data sent. For example, use Ajax and php to save data values in the database. Another method to track ad events is to send an event request to a pre-defined tracking URL.

Code snippet

<script>var ads_array = [
{ad 1}
{ad 2}
]
player.vroll({ ads_array, {trackUrl:"//path-to-tracking-url" }})
</script>