Preroll video example

Preroll video through videojs with Nuevo plugin

Direct video ad system (vroll) is a built-in Nuevo plugin feature. The system allows to play preroll video, multiple midroll and postroll videos. For preroll video you just need to set the time option "offset=0".
If you plan to use only pre-roll video, example code setup should look like:

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 and array or ad videos. See code example below.

Code snippet

<script>
var player=videojs('player_1');
player.nuevo({
//possible nuevo plugin options here
});
player.vroll([
{
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"
}
]);
</script>

How to track preroll video playback and click

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

Code snippet

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

Now you know what is video ad ID and what action is. Possible action values are: 'start', 'play', 'paused', 'skipped', 'completed' and 'clicked'.
You can make use of data sent. For example, use Ajax + php to save data values in the database.