Vpaid-html5-client-postmessage NPM

VPAIDHTML5Client

About

JS iframe wrapper for VPAID.

VPAID or Video Player Ad-Serving Interface Definition, establishes a common interface between video players and ad units, enabling a rich interactive in-stream ad experience.

The goals of VPAIDHTML5Client are:

common interface for VPAID in different technologies HTML5 and FLASH.
handle how to load the VPAID adUnit
be a simple and "stupid" implementation of VPAID

check videosjs-vast-vpaid if you need VPAID in videojs

JS

The project uses:

gulpjs to compile.

TODO

test how will work with a real ad in the demo and test
try to use the slot element inside the iframe to see if the ad's will not mess the css of the page
validate better if the postmessage and iframe works across browsers

Running the project

install nodejs and gulp
npm install to install all dependencies
gulp serve or npm start to start build script and a demo page should be open in default browser
gulp to watch, bundle and run tests
npm test or gulp test:ci task used by the server
gulp deploy:demo task used to update githubpage with demo and bin

Example of the usage

var vpaid = new VPAIDHTML5Client(el, video, {});
vpaid.loadAdUnit('vpaidAdURL.js', onLoad);

function onLoad(err, adUnit) {
    if (err) return;

    adUnit.subscribe('AdLoaded', onInit);
    adUnit.subscribe('AdStarted', onStart);

    adUnit.handshakeVersion('2.0', onHandShake);

    function onHandShake(error, result) {
        adUnit.initAd(480, 360, 'normal', -1, {AdParameters: currentAd.adParameters}, {});
    }

    function onInit() {
        adUnit.startAd();
    }

    function onStart() {
        console.log('-> AdStarted');
    }

}