Postroll video Ad example

Postroll video through videojs with Nuevo plugin

Direct video ad system (vroll) is a built-in Nuevo plugin for video.js. The system allows to play preroll video, multiple midroll and postroll video. In the example above, we present one midroll video at 00:30 and post-roll video.
Postroll video starts playing when the 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 is time "offset", same like for preroll or midroll video. In case of the post-roll video this must be "100%" value.
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>