• Video.js Simple Prerolls
  • Requirements
  • Adding the plugin
  • Changing Advertisement source dynamically
  • Documentation
    • Plugin Options
      • src
      • href
      • target
      • allowSkip
      • skipTime
      • repeatAd
      • adSign
      • showRemaining
      • adsOptions
      • lang
  • Credits
  • Release History
    • v2.0.0
    • v1.1.1
    • v1.1.0
    • v1.0.0
    • v0.2.0
    • v0.1.0
  • License

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 [email protected]. 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, [email protected] 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