Video.js Midroll Video Ads

Mid-roll video ads through Vroll plugin

The vroll plugin allows you to play pre-roll, mid-roll, and post-roll multiple linear video ads. Ads are defined through a JavaScript array. The mid-roll ad start time position is defined in seconds or in percent of the main video duration.

The example above makes use of three mid-roll videos. The first starts at 00:10 with a 5-second skip option, followed by the next mid-roll with an 3-second skip option at 00:20. The third non-skippable mid-roll 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>
const player=videojs('my_player', {license: "key"});
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:"20",
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>

Ad markers

The Nuevo plugin features an option to display ad markers for advertising plugins. This featue also concerns Vroll plugin and mid-roll ads. You just need to enable the adMarkers Nuevo plugin's option.

Code snippet

player.nuevo({ adMarkers:true });

How to track mid-roll playback and click

Just use javascript and simple function like:

Code snippet

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