Simple video.js plugin that uses the video.js' videojs-contrib-ads plugin to display a preroll video before the main video starts.
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', {plugins:{ads:{},preroll:{src:"advertisement.mp4"}}});
</script>There's also a working example of the plugin you can check out if you're having trouble.
You may pass in an options object to the plugin upon initialization. This object may contain any of the following properties:
Type: String
Required. Source video file to play
Type: String
Url to redirect to if user clicks on the ad. Can be left empty for no redirection.
Type: String
Default: _blank
Target to open the url in (eg _blank or _top)
Type: Boolean
Default: true
Allow the user to skip the ad when it has played for a number of seconds
Type: Integer
Default: 5
Number of seconds after which the video can be skipped
Type: Boolean
Default: false
Whether the ad should be repeated if a new src is loaded to the player
Uses javascript and css for video skipping and linking block from The Onions videojs-vast-plugin
- 0.1.0: Initial release
MIT