Postroll video Ad example

Postroll 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 video. In example above we present one midroll video at 00:30 and postroll video.
Postroll video starts playing when main video finished. It's obvious that it will not play for live streams, since livestream duration time is infinite. The only option you must set for preroll video is time "offset", same like for preroll or midroll video. In case of postroll video it must be "100%".
See code example setup below:

Code snippet

<script>
   var player=videojs('player_id');
   player.nuevo({
	// option1: value1,
	// option2: value2
   })

   player.vroll({
	src: '//path-to-postroll-video-file.mp4',
	type: 'video/mp4',
	href:'url-to-go-on-postroll-click',
	offset: '100%', //starts when main video ended
	id:'6'  //optional id to track midroll playback and click
   })
</script>

Now follow preroll, midroll and postroll videos all together setup code, like in example above.

Code snippet

<script>
   player.vroll([
	{
	  src: '//path-to-preroll-video.mp4',
	  type: 'video/mp4',
	  href:'url-to-go-on-preroll-click',
	  offset: '0', preroll video starts at 0
	  skip: '5', //optional number of seconds to allow skip preroll
	  id:'11'
	}, {
	  src: '//path-to-midroll-video.mp4',
	  type: 'video/mp4',
	  href:'url-to-go-on-second-midroll-click',
	  offset: '20', //starts at 00:20
	  skip: '3', //optional number of seconds to allow skip midroll
	  id:'12'
	},{
	  src: '//path-to-postroll-video.mp4',
	  type: 'video/mp4',
	  href:'url-to-go-on-postroll-click',
	  offset: '100%', //starts when main video ended
	  id:'13'
	}
]);
</script>

How to track preroll video playback, click and possible skip actions

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: 'play', 'skip', 'completed' and 'click'.
You can make use of data sent. For example, use Ajax + php to save data values in database.