Javascript Video Ads

One time fee € 20.00

Buy now

Javascript based video ads plugin

The Vroll plugin allows you to define and play multiple linear video ads and display multiple nonlinear banner ads. The ads are defined as an object of JavaScript arrays. The single ad parameters are as follows:

src: ad source URL.
type: ad source type. ("video/mp4", "video/webm", "application/x-mpegURL", "image/jpeg", "image/png", "image/gif")
href: URL to go on ad click.
offset: offset time (seconds) to start video ad playback or display banner ad.
skip: optional value (seconds) to skip video ad.
target: optional click URL target. Default is "_blank" (opens in a new window). Can be "_self" (opens in the same window).
restore: optional, by default enabled. If disabled (false), the banner ad is removed permanently when clicked to close.

The offset parameter requires more explanation. For the preroll video or a banner showing from the start, the offset value must be 0 or "start." For the postroll video, the offset value must be "100%" or "end." For a video or a banner that plays in the middle of the main video content, the offset is defined as the number of seconds from the beginning or as a percentage value of the content length.

Below you can see the code example of ads defined for the player above.

Code snippet

<script>
var my_ads = [
{src:"/path-to-preroll-video.mp4", type:"video/mp4", href="url-on-video-ad-click", offset:0, skip:5}
{src:"/path-to-banner1-ad.jpg", href="url-on-banner-ad-click", type:"image/jpeg", offset:0}
{src:"/path-to-midroll-video.mp4", type:"video/mp4", href="url-on-video-ad-click", offset:20, skip:8}
{src:"/path-to-banner2-ad.jpg", href="url-on-banner-ad-click", type:"image/jpeg", offset:30, resume:false}
{src:"/path-to-postroll-video.mp4", href="url-on-video-ad-click", type:"video/mp4", offset:"end", skip:5}
];
</script>

The first ad is a preroll video with a 5-second skip option (offset: 0).
The banner ad (second ad) is defined also at time offset: 0 (appears immediately after the preroll video has finished).
The third ad is a midroll video with an 8-second skip option that starts playing at 00:20 (offset: 20).
The foutrh ad is the second banner ad, ordered to display at 00:30 (offset: 30), is removed when clicked to close.
And finally, the fifth ad is a postroll video with a 5-second skip option (offset: "end").

Setup

First you need to load video.js and vroll plugin CSS and JavaScript assets.

Code snippet

<link href="//vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet">
<link href="/videojs/plugins/vroll.css" rel="stylesheet">

<script src="//vjs.zencdn.net/8.23.4/video.min.js"></script>
<script src="/videojs/plugins/vroll.js"></script>

Prepare <video> element with custom Id.

Code snippet

<video id="my-player" class="video-js"><source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>

Define ads and initialize the player and vroll plugin

Code snippet

<script>
var my_ads = [{....}];

const player = videojs("my_player"); player.vroll(my_ads);
</script>