@dailymotion/vmap
Version:
Javascript VMAP Parser
136 lines (96 loc) • 4.45 kB
Markdown
# VMAP Javascript Library
[](https://travis-ci.org/dailymotion/vmap-js)
[](https://github.com/prettier/prettier)
[](https://opensource.org/licenses/MIT)
[](https://badge.fury.io/js/vmap)
Parse a VMAP XML document to Javascript object. Complies with [VMAP 1.0.1 spec](http://www.iab.net/media/file/VMAP.pdf).
## Installation
Install with npm
```
npm install @dailymotion/vmap
```
## Usage
Provide the `VMAP` constructor an XML in order to have a parsed version of it.
Access `VMAP` properties using the APIs documented below.
``` javascript
import VMAP from '@dailymotion/vmap';
// Fetch VMAP as XML
fetch(vmapURL)
.then(response => response.text())
.then(xmlText => {
// Get a parsed VMAP object
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
const vmap = new VMAP(xmlDoc);
})
.catch(error => {
console.error('Error fetching VMAP:', error);
});
```
## API
### VMAP
#### Properties
* `version`: The VMAP version (should be 1.0).
* `adBreaks`: An array of `VMAPAdBreak` objects.
* `extensions`: An array of `Object` with
* `children`: `Object` containing all this extension children and their name as the key
* `attribute`: `Object` containing all this extension attributes and their name as the key
* `value`: `Object` parsed from CDATA or as a fallback all of the text nodes of this extension concatenated
### VMAPAdBreak
Provides information about an ad break.
#### Properties
* `timeOffset`: Represents the timing of the ad break.
* `breakType`: Identifies whether the ad break allows "linear", "nonlinear" or "display" ads.
* `breakId`: An optional string identifier for the ad break.
* `repeatAfter`: An option used to distribute ad breaks equally spaced apart from one another along a linear timeline.
* `adSource`: A `VMAPAdSource` object.
* `trackingEvents`: An array of `Object` with tracking URLs
* `event`: The name of the event to track for the element. Can be one of breakStart, breakEnd or error.
* `uri`: The URI of the tracker.
* `extensions`: An array of `Object` with
* `children`: `Object` containing all this extension children and their name as the key
* `attribute`: `Object` containing all this extension attributes and their name as the key
* `value`: `Object` parsed from CDATA or as a fallback all of the text nodes of this extension concatenated
#### Methods
* `track(event, errorCode)`: Call the trackers for the given event with an option error code parameter for `error` events.
### VMAPAdSource
Provides the player with either an inline ad response or a reference to an ad response.
#### Properties
* `id`: Ad identifier for the ad source.
* `allowMultipleAds`: Indicates whether a VAST ad pod or multple buffet of ads can be served into an ad break.
* `followRedirects`: Indicates whether the video player should honor the redirects within an ad response.
* `vastAdData`: Contains an embedded VAST response.
* `adTagURI`: Contains a URI to the VAST.
* `customData`: Contains custom ad data.
## Support and compatibility
The library is 100% written in JavaScript and the source code uses modern features like `modules`, `classes`, ecc... . Make sure your environment supports these features, or transpile the library when bundling your project.
### Pre-bundled versions
We provide several pre-bundled versions of the library (see [`dist` directory](dist/))
#### Browser
A pre-bundled version of VMAP-jsis available: [`vmap-js.js`](dist/vmap-js.js).
You can add the script directly to your page and access the library through the `VMAP` constructor.
```html
<script src="dist/vmap-js.js"></script>
```
```javascript
var vmap = new VMAP(vmapXML);
```
#### Node
A pre-bundled version for node is available too: [`vmap-js-node.js`](dist/vmap-js-node.js).
```javascript
const VMAP = require('@dailymotion/vmap')
const vmap = new VMAP(vmapXML);
```
## Build and tests
Install dependencies with:
```
npm install
```
The project is bundled using [Rollup](https://rollupjs.org/guide/en). Build with:
```
npm run-script build
```
Run tests with:
```
npm test
```