Video Integration with VAST

The Adhese Vast JS library is meant to ease the integration of VAST ads in video players. It contains cross-domain safe methods for requesting ads from your Adhese account and convenient methods for playing and tracking video ads. It is, however, not a player on its own, and it does not insert anything in the DOM.

1.

Load the JavaScript file:

```html
<script type="text/javascript" src="adhese-vast.js"></script>
```

Create an AdheseVastWrapper object:
```
var wrapper = newAdheseVastWrapper();
```
Register a listener for the ADS_LOADED event fired by AdheseVastWrapperThe first parameter is the event name, and the second is the name of your callback function. This function will be called when the wrapper is ready to handle your ad request.
```
wrapper.addEventListener("ADS_LOADED", yourCallBackFunction);
```
Initiate a request for ads passing the host of your Adhese account and the sloth path and target parameters you wish to request.
```
wrapper.requestAds("http://ads.demo.adhese.com", "_test_", ["preroll", "postroll"]);
```
Once the request is finished, AdheseVastWrapper will fire the ADS_LOADED event, and your callback function will be called. From then on, you can access several properties of the wrapper object to get info on the ads.

This is a complete example:

<html>
<head>
    <script type="text/javascript"src="dist/adhese-vast.min.js">
        </script>
</head>
<body>
    <!-- create a player and info pane container -->
    <h1 id="info">
        </h1>
        <div id="player">
            </div>
            <script type="text/javascript">
                 
                // just for completing the example, the content that will be shown after the example ad
                var actualContentSrc = "http://media.w3.org/2010/05/bunny/movie.mp4";
                 
                // get reference to the container elements
                var playerContainer = document.getElementById("player");
                var infoContainer = document.getElementById("info");
                 
                var a = new AdheseVastWrapper(true);
                a.init();
                a.addEventListener("ADS_LOADED", adsAreLoaded);
                a.requestAds("http://ads.demo.adhese.com", "_sdk_example_", ["preroll"]);
                 
                function adsAreLoaded() {
                console.log("adsAreLoaded")
                 
                // if has preroll, show it
                if (a.hasAd("preroll")) {
                // display duration
                infoContainer.innerHTML = "ad takes " + a.getDuration("preroll") + " time, stay tuned";
                 
                // create source element for video
                var adSrc = document.createElement("source");
                adSrc.src = a.getMediafile("preroll","video/mp4");
                adSrc.type = "video/mp4";
                 
                // create desired video element
                var adPlayer = document.createElement("video");
                 
                adPlayer.width = 640;
                adPlayer.height = 480;
                adPlayer.autoplay = "true";
                 
                // if using a flash based player: make sure adPlayer is a reference to the flash object and
                allowScripAccess is true
                // event names will be different in flash as well, depending on how video playback is implemented
                 
                // attach to timeupdate event for passing the currentTime, this allows adhese to track the actual
                viewing of the ad
                adPlayer.addEventListener("timeupdate", function() { a.timeupdate("preroll", adPlayer.currentTime); },
                true);
                // clicks on video player should be sent to adhese for handling and reporting
                adPlayer.addEventListener("click", function() { a.clicked("preroll", adPlayer.currentTime); }, true);
                // when playing has ended, tell and adhese and than continue to showing content
                adPlayer.addEventListener("ended", function() { a.ended("preroll", adPlayer.currentTime);
                showActualContentAfterPreroll(); }, true);
                 
                //add the source to the video element
                adPlayer.appendChild(adSrc);
                 
                // ad the video element to the player container
                playerContainer.appendChild(adPlayer);
                }
                 
                }
                 
                function showActualContentAfterPreroll() {
                // here comes the code to start your content after the ad
                infoContainer.innerHTML = "Feature film starting. Enjoy!";
                playerContainer.innerHTML = '
                <video id="video"controls=""autoplay=""width="640"height="480"preload="none"poster="http:
                    //media.w3.org/2010/05/bunny/poster.png">
                    <source id="mp4"src="http: //media.w3.org/2010/05/bunny/movie.mp4"type="video/mp4">
                        <source id="ogv"src="http: //media.w3.org/2010/05/bunny/movie.ogv"type="video/ogg"></video>';
                            }
            </script>
</body>
</html>