Vroll advertising system

The original vroll advertising system developed by Nuevodevel.com allows you to play multiple preroll, midroll, and postroll video ads. It is also possible to display an advertising banner above the player's control bar. The user can define ads through a JavaScript array or load it from the XML document. Ads events can be tracked through JavaScript or an external tracking script.

First you need to load player and plugin files:

Code snippet

<script src="/videojs/videojs.min.js"></script>
<script src="/videojs/nuevo.min.js"></script>
<script src="/videojs/plugins/vroll.js"></script>

The basic player initialization code is:

Code snippet

<script>
const player=videojs('my_player', {license: "key"});
player.nuevo({//possible nuevo plugin options here })|
player.vroll({ads_array or ad tag Url})
</script>

And this is the list of parameters for a single ad defined through JavaScript array:

src (required) - video or image source URL.
type (required) - video or image type.
href (required) - URL to go when video or a banner image is clicked.
id - unique ad ID, useful to track ad events.
offset - the time offset in seconds, percentage, or use "end" for a post-roll video to either play a video ad or display a banner ad.
skip - the time in seconds to skip video.
title - short title (about 25 characters) if you prefer to display the video ad banner.
button - button text for video banner. Accepted values are: "learn", "visit", "check", "see", "discover", "try", "order", "play", "shop", "buy", "download", "watch".
restore - if enabled (true), the banner ad can be restored once it was closed.

Let's see what ads array can be:

Code snippet

<script>
const ads_aaray = [
{src:"preroll-video-source1-URL", type:"video/mp4", href:"Click URL", offset:0, skip:5, title:Short title", button:"check"},
{src:"preroll-video-source2-URL", type:"video/mp4", href:"Click URL", offset:0, skip:5, title:"Short title", button:"order"},
{src:"midroll-video-source3-URL", type:"video/mp4", href:"Click URL", offset:15, skip:5},
{src:"banner-URL", type:"image/jpg", href:"Click URL", offset:15},
{src:"midroll-video-source4-URL", type:"video/mp4", href:"Click URL", offset:"50%", skip:5},
{src:"midroll-video-source5-URL", type:"video/mp4", href:"Click URL", offset:"50%", skip:5},
{src:"postroll-video-source6-URL", type:"video/mp4", href:"Click URL", offset:"end", skip:5, title="Short title", button:"learn"},
]
player.vroll({ ads_array })
</script>

Two preroll videos, one midroll video at 00:15, a banner ad at 00:15, two ad-pod midroll videos at 50% of the time, and one postroll video will all be played as a result of this ad definition. There will be a click banner for preroll videos and for a postroll video. Video ads with the same time offset value will play one after the other as ad pods.

And here's the code to load a single (preroll) ad.

Code snippet

<script>
player.vroll( {src:"preroll_video.mp4", type="video/mp4", href="Click URL", offset:0, skip:5} );
</script>

Initializing ads from an XML document is much more simple:

Code snippet

<script>
player.vroll({ adTag: "ads-xml-url" })
</script>

And here is an example of an XML document used for the player above.

Ad Info Icon

The vroll plugin, like other advertising plugins from Nuevodevel, supports the display of clickable small ad info icon. You can define ad icon through the nuevo plugin's option.

Code snippet

player.nuevo({adInfo:"https://www.example.com/advertise"})

How to track video ad events

Tracking ad events through the Javascript function looks like this:

Code snippet

<script>player.on('vroll', function(track,data) {
let ad_id = data.id;
let event = data.event;
});
</script>

Possible video events to track are: 'start', 'firstQuartile', 'midpoint', 'thirdQuartile', 'skip', 'completed', 'click'.
Events for nonlinear banner are: 'nonlinearImpression', 'nonlinearClose', 'nonlinearHide', 'nonlinearRestore'.

You can also track events through an external script. For each event the player calls the tracking URL with the ad ID and event name in the request, e.g.,
https://domain.com/trackingscript.php?id=adId&event=firstQuartile

You need to configure the script's trackURL inside the vroll initialization code to make use of such events tracking method.

Code snippet

player.vroll( ads_array, { trackUrl:"//path-to-tracking-url" });
Or
player.vroll({ tagURL: "ads-xml-url"}, { trackUrl:"//path-to-tracking-url" });

It is possible to request new ad or new set of ads at any time of video playback.

Code snippet

player.vroll.request(new_ads);