Preroll video example

Preroll video through videojs with Nuevo plugin

Direct video ad system (vroll) is built-in Nuevo plugin feature from version 5.2 video.js. The system allows to play preroll video, multiple midroll and postroll videos. For preroll video you just need to set time option "offset=0".
If you plan to use only preroll 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 preroll video + midroll video and/or postroll video, you must define and array or roll 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 database.