/videojsx-vast-plugin

A video.js 5 plugin to allow the player to serve adverts using VAST

Primary LanguageJavaScriptOtherNOASSERTION

videojsx-vast-plugin

Initially, the code was taken from videojs-vast-plugin and made it work with videojs 7. It is very different now.

This project intends to keep up to date with the videojs and its other dependencies.

Build

NodeJs and its package manager (npm) is required to build.

Run npm install then npm run-script build.

The build creates two independent artifacts in the dist/ folder:

Artifact Name Files Description
Plugin videojsx.vast.js, videojsx.vast.css Standalone plugin that can be integrated to an external video.js player.
Video Player player.js A file that has video.js, css and other dependencies bundled in.

Also, every JavaScript .js file has a compressed version .js.gz

Usage

Setting Up Plugin Scripts

Include this plugin (videojsx.vast.css and videojsx.vast.js) and its dependencies.

Ordering does matter. Be sure you request video.js first and videojs-contrib-ads anywhere before videojsx.vast.js.

It will look something like this:

<head>
    <!-- video.js framework -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.2.3/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.2.3/video.min.js"></script>

    <!-- Ads plugin for video.js -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.6.4/videojs.ads.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.6.4/videojs.ads.min.js"></script>

    <!-- This plugin for video.js -->
    <link href="http://where-you-host-the-plugin.com/videojsx.vast.css" rel="stylesheet">
    <script src="http://where-you-host-the-plugin.com/videojsx.vast.js"></script>
</head>

Setting Up Video Player Script

Put anywhere before you start using it. For example, in the head section:

<head>
    <script src="http://where-you-host-the-plugin.com/player.js"></script>
</head>

General Use

Example:

<video id="vid1" width="640" height="400" controls class="video-js vjs-default-skin" data-setup='{"autoplay":false}' poster="your-poster.jpg">
  <source id ="mysrc" src="your-content.mp4" type="video/mp4">
  Your browser does not support video.
</video>
<div id="companion"></div>

<script>
  var player = videojs('vid1');

  var companion = {
    elementId: "companion",
    maxWidth: 300,
    maxHeight: 250
  };

  player.vast({url: 'http://your-vast-url.com/vast.xml', skip: 8, companion: companion});
</script>

Options

Name Optional default Description
url No n/a URL that responds with a VAST document
seekEnabled Yes false Enable the player seek control when advert is playing. controlsEnabled must be enabled also.
controlsEnabled Yes false Enable the player controls (pause, play, volume) when advert is playing
wrapperLimit Yes 10 Maximum number of VAST wrappers (aka VAST request redirects) allowed
withCredentials Yes true Enable third-party cookies on the VAST request
skip Yes 0 Number of seconds the user has to wait before the advert can be skipped
companion Yes {} See companion options below
Companion Options
Name Optional default Description
elementId No n/a Id of the HTML element that will serve as the creative container
maxWidth No n/a The maximum width allowed for the creative
maxHeight No n/a The maximum height allowed for the creative

Dev Workflow

Run npm start brings up a development server at port 9999 with automatic background builds.

The page is http://localhost:9999/index.html

The command should automatically open this page.

The build will be triggered when any of the files under src/ is modified. The currently opened page on port 9999 should reload automatically.

Testing

Experimental

Credit