search

minznerjosh / vast-player

Playback VAST creatives in a web browser.
MIT License
45 stars 32 forks source link

readme

vast-player

Vast-Player makes it easy to playback linear VAST creatives in the browser. It currently supports VPAID 1.0/2.0 (JavaScript and Flash) and HTML5 <MediaFile>s. The library has the following responsibilites:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Vast-Player Example</title>
        <script src="https://cdn.jsdelivr.net/npm/vast-player@latest/dist/vast-player.min.js"></script>
        <style>
            #container {
                width: 640px; height: 385px;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            (function(VASTPlayer) {
                'use strict';

                var player = new VASTPlayer(document.getElementById('container'));

                player.once('AdStopped', function() {
                    console.log('Ad finished playback!');
                });

                player.load(
                    'https://platform-staging.reelcontent.com/api/public/vast/2.0/tag?campaign=cam-e951792a909f17'
                ).then(function startAd() {
                    return player.startAd();
                }).catch(function(reason) {
                    setTimeout(function() { throw reason; }, 0);
                });
            }(window.VASTPlayer));
        </script>
    </body>
</html>

Adding to Project

via npm (with browserify)

  1. Install as a dependency

    $> npm install vast-player --save

  2. Use the module

    var VASTPlayer = require('vast-player');
var player = new VASTPlayer(document.getElementById('container'));

player.load('https://www.myadserver.com/mytag');

via RequireJS

  1. Add to RequireJS config

    requirejs.config({
    paths: {
        VASTPlayer: 'https://cdn.jsdelivr.net/npm/vast-player@0.2/dist/vast-player.min.js'
    }
});

  2. Use the module

    define(['VASTPlayer'], function(VASTPlayer) {
    var player = new VASTPlayer(document.getElementById('container'));

    player.load('https://www.myadserver.com/mytag');
});

via a <script>

  1. Add a <script> to the page

    <script src="https://cdn.jsdelivr.net/npm/vast-player@0.2/dist/vast-player.min.js"></script>

  2. Use the module

    var player = new window.VASTPlayer(document.getElementById('container'));

player.load('https://www.myadserver.com/mytag');

API

main exports

VASTPlayer(container:Node, [config]:Object) extends EventEmitter

VASTPlayer.vpaidSWFLocation:String

The location of the SWF needed for Flash VPAID playback. The defaults to a location on the jsDelivr CDN. Only override this property if you want to use a version of the SWF you have uploaded yourself.