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