Midroll video Ad example

Midroll video through videojs with Nuevo plugin

Built-in Nuevo plugin's direct video ad system (vroll) allows to play preroll, midroll and postroll videos. Midroll video is the most advanced part of video ad system. You can play multiple midroll videos at any time position. You can play midroll videos one after another. You can order to play midroll video at any time position using seconds or percent of main video duration.

Example above make use of 3 midroll videos. First starts at 00:10 with 5 seconds skip option, then followed by next midroll and 8 seconds skip option. Third non-skippable midroll starts at 50% of main video duration.
See the code tutrorial as used in example above.

<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:

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

Now you know what is midroll id and what action is ('play', 'skip' or 'click');
You can make use of data sent. For example, use Ajax + php to save data values in database.