Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vmap-kit with all npm packages installed. Try it out:

var vmapKit = require("vmap-kit")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vmap-kit v1.0.18

VMAP Parser, JwPlayer and VideoJs plugin.

VMAP Parser, JwPlayer and VideoJs plugin

VMAP Parser, JwPlayer and VideoJs plugin.

Showing a VMAP ad require to parse the VMAP xml and show ad in video player. This package handle VMAP parsing (to a JS object), VideoJs plugin and JwPlayer plugin. You can use this package in Browser (umd) or Node (es).

Install

You can install this package with npm:

npm install vmap-kit@latest

or with yarn:

yarn add vmap-kit@latest

Parse VMAP

To parse VMAP xml in browser you need to load the script:

<script src="dist/parser/browser.js"></script> 

and then parse the xml. An example of load VMAP from remote can be found in bellow:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        var vmapObject = VMAP.JSON(xhr.responseText);
        console.log(vmapObject);
    }
};
xhr.open("GET", "vmap.xml");
xhr.send();

Video Player plugin

The official JwPlayer's ad plugin isn't free and you can find a free version here. The VideoJs and JwPlayer plugins load the VMAP xml and show the ad.

Currently these plugins support these types of MediaFile's mimetype:

  • image/gif
  • image/png
  • image/jpeg
  • video/mp4

and also can play ads this start and end time offset.

This plugins append location.href as p, document.referrer as r and a fingerprint as tid to the request of vmap.

Warning: from 1.0.3 version, the plugin name change from vmap to vast.

JwPlayer VMAP Plugin

To show ad in JwPlayer you need put this config in your JwPlayer config:

var playerInstance = jwplayer("video");
playerInstance.setup({
    ....
    plugins: {
        "dist/jwplayer/vmap.js": {}
    },

    advertising: {
        client: "vast",
        schedule: "/sample/vmap.xml" // VMAP endpoint address
    }
    ....
});

An example of JwPlayer can be found here.

VideoJs VMAP Plugin

To show ad in VideoJs you need load the plugin script:

<script src="/dist/videojs/vmap.js"></script>

and then config the VideoJs to show ad in its options:

plugins: {
        vast: {
            requestUrl: '/sample/vmap.xml',
        }
    }

An example of JwPlayer can be found here.

Todo List

  • Tests
  • Support other time offsets

License

The license of this package is MIT License and is being developed in ClickYab.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free