README.md
VPAIDHTML5Client
================
[![bitHound Score](https://www.bithound.io/github/MailOnline/VPAIDHTML5Client/badges/score.svg)](https://www.bithound.io/github/MailOnline/VPAIDHTML5Client/master)
[![Code Climate](https://codeclimate.com/github/MailOnline/VPAIDHTML5Client/badges/gpa.svg)](https://codeclimate.com/github/MailOnline/VPAIDHTML5Client)
[![Test Coverage](https://codeclimate.com/github/MailOnline/VPAIDHTML5Client/badges/coverage.svg)](https://codeclimate.com/github/MailOnline/VPAIDHTML5Client/coverage)
[![Build Status](https://travis-ci.org/MailOnline/VPAIDHTML5Client.svg?branch=master)](https://travis-ci.org/MailOnline/VPAIDHTML5Client)
[![devDependency Status](https://david-dm.org/Mailonline/VPAIDHTML5Client/dev-status.svg)](https://david-dm.org/Mailonline/VPAIDHTML5Client#info=devDependencies)
About
-----
JS iframe wrapper for [VPAID](http://www.iab.net/vpaid).
[VPAID](http://www.iab.net/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](https://github.com/MailOnline/VPAIDHTML5Client) and [FLASH](https://github.com/MailOnline/VPAIDFLASHClient).
- handle how to load the VPAID adUnit
- be a simple and "stupid" implementation of VPAID
check [videosjs-vast-vpaid](https://github.com/MailOnline/videojs-vast-vpaid) if you need VPAID in [videojs](https://github.com/videojs/video.js)
JS
--
The project uses:
- [gulpjs](http://gulpjs.com/) 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
--------------------
```javascript
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');
}
}
```
License
-------
licensed under the MIT License, Version 2.0. [View the license file](LICENSE.md)
Copyright © 2015 MailOnline