Display banner ads

To display banner ads, you need to create banner instances and allow Browser TVSDK to listen for ad-related events.

Browser TVSDK provides a list of companion banner ads that are associated with a linear ad through the AdobePSDK.PSDKEventType.AD_STARTED event.

Manifests can specify companion banner ads by:

  • An HTML snippet
  • The URL of an iFrame page
  • The URL of a static image or an Adobe Flash SWF file

For each companion ad, Browser TVSDK indicates which types are available for your application.

Add a listener for the event AdobePSDK.PSDKEventType.AD_STARTED that does the following:

  1. Clears existing ads in the banner instance.

  2. Gets the list of companion ads from Ad.getCompanionAssets.

  3. If the list of companion ads is not empty, iterate over the list for banner instances.

    Each banner instance (an AdBannerAsset) contains information, such as width, height, resource type (html, iframe, or static), and data that is required to display the companion banner.

  4. If a video ad has no companion ads booked with it, the list of companion assets contains no data for that video ad.

  5. Sends the banner information to a function on your page that displays the banners in an appropriate location.

    This is usually a div, and your function uses the div ID to display the banner. For example:

    Add the event listener:

    _player.addEventListener(AdobePSDK.PSDKEventType.AD_STARTED, onAdStarted);

    Implement the listener handler:

    private function onAdStarted(event:AdPlaybackEvent):void
{
    // check if there are any companion banner
    if (event.ad && event.ad.companionAssets
                 && event.ad.companionAssets.length > 0) {
         for each (var banner:AdBannerAsset in event.ad.companionAssets) {
            if (ExternalInterface.available) {
                //-- call the java script that will handle the banner display.
                ExternalInterface.call('addBanner', banner.resourceType,
                    banner.width, banner.height, banner.bannerData);
             }
         }
     }
     //...
}

    Example of JavaScript to handle the display:

    function displayCompanion (resourceType, width, height, data) {
    console.log(resourceType + "," +  width + "," +  height);
    var bannerDiv = document.getElementById('banner' + width + 'x' + height);

    // Assuming that there is an HTML element on the page
    // with an id of "banner300x250", for example
    if (bannerDiv !== null) {
        bannerDiv.innerHTML = data;
    }
}

On this page