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:
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:
Clears existing ads in the banner instance.
Gets the list of companion ads from Ad.getCompanionAssets
.
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.
If a video ad has no companion ads booked with it, the list of companion assets contains no data for that video ad.
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;
}
}