Video.js Simple Prerolls
Simple video.js plugin that uses the video.js' videojs-contrib-ads plugin to display a preroll video before the main video starts.
Requirements
This plugin works with VideoJS 6 and up. To use it with VideoJS 5, please use videojs-contrib-ads@5.2.0-1
. This plugin also can be used with videojs-playlist
and the source of ad can be changed dynamically by assigning new ad src in the beforeplaylistitem
event hook of videojs-playlist
.
Adding the plugin
Download the videojs-contrib-ads plugin or build it yourself from the repository. Include videojs.ads.js and videojs-preroll after including video.js itself.
<script src="video.js"></script>
<script src="videojs.ads.js"></script>
<script src="videojs-preroll.js"></script>
<link href="video-js.css" rel="stylesheet" type="text/css">
<link href="video.ads.css" rel="stylesheet" type="text/css">
<link href="videojs-preroll.css" rel="stylesheet" type="text/css">
Initialize the plugin:
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
<script>
videojs('example_video_1', {}, function(){
var player = this;
player.preroll({
src:"advertisement.mp4"
});
});
</script>
Using npm
npm install --save videojs-preroll-v2
There's also a working example of the plugin you can check out if you're having trouble.
Changing Advertisement source dynamically
While using with videojs-playist
, you can change the adverstisement source dynamically like this. Other options can also be changed by assigning corresponding value to corresponding properties like player.options.[property]=[value]
examplePlayer.on('beforeplaylistitem', function(){
let currentVideoIndex = examplePlayer.playlist.currentIndex();
console.log('Current Index: ', currentVideoIndex);
examplePlayer.preroll.options.allowSkip = true;
examplePlayer.preroll.adDone = false;
examplePlayer.preroll.options.src = adSources[currentVideoIndex + 1];
if(currentVideoIndex >= 1){
examplePlayer.preroll.options.repeatAd = false;
}
});
Documentation
Plugin Options
You may pass in an options object to the plugin upon initialization. This object may contain any of the following properties:
src
Type: String
| Object
| Array
Required
. Source video file to play. Can be any valid videojs src parameter
href
Type: String
Url to redirect to if user clicks on the ad. Can be left empty for no redirection.
target
Type: String
Default: _blank
Target to open the url in (eg _blank or _top)
allowSkip
Type: Boolean
Default: true
Allow the user to skip the ad when it has played for a number of seconds.
skipTime
Type: Integer
Default: 5
Number of seconds after which the video can be skipped.
repeatAd
Type: Boolean
Default: false
Whether the ad should be repeated if a new src is loaded to the player.
adSign
Type: Boolean
Default: false
Adds an "Advertisement" sign to the video.
showRemaining
Type: Boolean
Default: false
Show the remaining time of the ad (only if allowSkip
is set to false.)
adsOptions
Type: Object
Default: {}
Settings object passed to the videjs-contrib-ads plugin.
lang
Type: Object
Default:
{
'skip':'Skip',
'skip in': 'Skip in ',
'advertisement': 'Advertisement',
'video start in': 'Video will start in: '
}
Language strings for skip button, "Advertisement" sign and remaining ad time element.
Credits
Uses javascript and css for video skipping and linking block from The Onions videojs-vast-plugin
Release History
v2.0.0
- Added cross-compatibility with VideoJS version 6 & 7
- For compatibility with VideoJS version 5,
videojs-contrib-ads@5.2.0-1
must be used - Options, including advertisement source, can be changed dynamically
v1.1.1
- Added cross-compatibility with Video.js version 5 and 6
v1.1.0
- Added "Advertisement" sign option
- Added remaining time sign option
- Modified loadingSpinner behavior to use native hide/show functions
- Added loadingSpinner show, bigPlayButton hide and posterImage hide to exitPreroll to provide loading status feedback to user
v1.0.0
- Updated videojs-contrib-ads library to v3.0.0 and made the preroll plugin compatible with it
- Changed plugin for video.js v5.0.0
- Added language to config
- Changed the recommended setup to ensure videojs-contrib-ads loads properly
- Fixed issue when preload was set to "none" which caused the player to require another click on the play button
v0.2.0
- Updated videojs-contrib-ads library to v0.5.0 and made the preroll plugin compatible with it
- Fixed some of the loading events to start playback faster if there is no ad to be displayed
v0.1.0
- Initial release
License
MIT