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`	Yes	n/a	URL that responds with a VAST document
`xml`	Yes	n/a	The VAST document. Use as an alternative to `url`. Can be a String or XMLDocument.
`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
`vpaid`	Yes	`{}`	See VPAID 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

VPAID Options

Name	Optional	Default	Description
`videoInstance`	Yes	`'none'`	Determines which video element to pass to the VPAID ad. Any one of: `'none'`, `'new'` and `'same'`.
`containerId`	Yes	`undefined`	The id of the container. Usage is not recommended.
`containerClass`	Yes	`'vjs-vpaid-container'`	The class name of the container. Usage is not recommended.

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

This plugin is a modification of an existing plugin videojs-vast-plugin by The Onion
The Video.js Framework itself
Video.js's Ad plugin allowing video ad integration (switching between content and pre-roll)
Dailymotion's VAST client to parse and read VAST content
MailOnline's VPAIDHTMLClient. A JavaScript iframe wrapper for VPAID

FAQs

What is videojsx-vast-plugin?

Is videojsx-vast-plugin well maintained?

Package last updated on 21 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

videojsx-vast-plugin