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>
You can make use of data sent. For example, use Ajax + php to save data values in database.