Preroll video example

Preroll video through Vroll plugin

The vroll plugin allows you to play preroll, midroll, and postroll multiple video ads. For the preroll video ad, you should set set the timeOffset equal to 0 or you can skip the timeOffset option at all.
If you plan to use only pre-roll video, the example code setup should look like this:

Code snippet

<script>
const player=videojs('my_player', {license: "key"});
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 pre-roll video, mid-roll video, and/or post-roll video, you must define an array of ad videos. See the code example below.

Code snippet

<script>
const player=videojs('my_player', {license: "key"});
player.nuevo({
//possible nuevo plugin options here
});
var ads_array = [
{
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"
}
]);
player.vroll( ads_array)
</script>

Ad Info Icon

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

Code snippet

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

Click button

By default when the user click or touch over the video element, he will be redirected to advertisement URL. From the version 13.1.0 of the Nuevo software it is possible to define custom button, which is an alternative for the full window click element. The button may feature custom icon and custom text, any background and text colors.

Code snippet

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.
clickthrough: "button" //optional
buttonText: "Buy Now" //optional
buttonIcon: "url-to-icon-image" //optional
buttonBackground: "HEX color" //optional
buttonColor: "HEX color" //optional
});

Default text for button text is "Visit Now", button icon is not defined. Button icon will be rescaled to maximum 25px height if it is higher.

How to track preroll video playback and click

Tracking video ad is the same for preroll, midroll, and postroll video. The Javascript function looks like this:

Code snippet

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

Possible action values are: 'start', 'play', 'paused', 'skipped', 'completed', and 'clicked'.
You can make use of the data sent. For example, use Ajax and php to save data values in the database. Another method to track ad events is to send an event request to a pre-defined tracking URL.

Code snippet

<script>var ads_array = [
{ad 1}
{ad 2}
]
player.vroll({ ads_array, {trackUrl:"//path-to-tracking-url" }})
</script>