Midroll video Ad example

Midroll video through videojs with Nuevo plugin

The vroll plugin allows you to play preroll, midroll, and postroll multiple video ads. Ads are defined through a javascript array. The midroll ad start time position is defined in seconds or in percent of the main video duration.

The example above makes use of three midroll videos. The first starts at 00:10 with a 5-second skip option, followed by the next midroll with an 8-second skip option. The third non-skippable midroll starts at 50% of the main video duration.
See the code tutorial as used in the example above.

Code snippet

<script src="/videojs/video.min.js"></script>
<script src="/videojs/nuevo.min.js"></script>
<script src="/videojs/plugins/vroll.js"></script>

<script>
var player=videojs('player_1');
player.nuevo({ option1: value1, option2: value2 })
 player.vroll([
{
src: "https://path-to-midroll_1.mp4",
type:"video/mp4", 
href: "url-to-go-on-midroll-click",
offset:"10",
skip:"5",
id:"6"
}, {
src: "https://path-to-midroll_2.mp4",
type:"video/mp4",
href: "url-to-go-on-midroll-click",
offset:"10",
skip:"8",
id:"9"
}, {
src: "https://path-to-midroll_3.mp4",
type:"video/mp4",
href: "url-to-go-on-midroll-click",
offset:"50%",
id:"10"
}
]);
</script>

How to track midroll playback and click

Just use javascript and simple function like:

Code snippet

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