Example: Multiple Companion Ads

Here is an example of a setup of JW Player with VAST advertising client. Using the Advertising API, we fetch a list of companions from the VAST tag and insert these into the page:

This document applies to users of JW Player Ads. Don't have Ads? Upgrade Now.
 
 
Text will be replaced
 

Embed code

As always, ensure you have uploaded a copy of JW Player and included the script in the <head> of your page, together with your player key. See the Quick Start Guide for more info. Next, place the following embed code at the location you want the player to appear:

<div id="adPlayer">Text will be replaced</div>

<script>
var playerInstance = jwplayer("myElement");
playerInstance.setup({
image: "/uploads/myPoster.jpg",
file: "/uploads/myVideo.mp4",
	advertising: {
	client: "vast",
	tag: "//adserver.com/vastResponse.xml"
	}
});
</script>

Script code

With the player and VAST tag set up, it's time to add the code for fetching and inserting the companions. First, setup some element in which you want to load the companions:

<div id="topAd"></div>
<div id="rightAd"></div>
<div id="bottomAd"></div>

Next, insert the scripting code that uses the JW Player Advertising API to fetch the companions and display them. Determining which companion to display where can be done by checking the width or height of the available companions:

<script type="text/javascript">
playerInstance.on('adCompanions', function(event) {
  for(var i=0; i<event.companions.length; i++) {
    var entry = event.companions[i];
    if(entry.width == 728) {
      insertAd("topAd",entry.resource);
    } else if(entry.width == 160) {
      insertAd("rightAd",entry.resource);
    } else if(entry.height == 32) {
      insertAd("bottomAd",entry.resource);
    }
  }
});

function insertAd(element,resource) {
  var div = document.getElementById(element);
  div.style.backgroundImage = "url("+resource+")";
}
</script>

Note the specific on('adCompanions') API call is available for both VAST advertising and Google IMA. The API call is available in both HTML5 and Flash mode.

Did you find this article helpful?

Please log in to rate this article.