This project is read-only.
When playing ads in your application a common requirement is to indicate to the end-user how many seconds remain before the ad is complete. This document describes how to add code to your application to accomplish this.

Here's a simple example of how to get at the time remaining for an ad. Note: the code below will work with all types of ads: FreeWheel, VAST, VMAP, clips, ...etc.

In JavaScript:

var timeRemainingChangedEventHandler;

ready: function (element, options) {
    var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
    WinJS.Binding.processAll(element, item);

    var mediaPlayerElement = element.querySelector("[data-win-control='PlayerFramework.MediaPlayer']");
    mediaPlayer = mediaPlayerElement.winControl;
    mediaPlayer.adHandlerPlugin.addEventListener("activateadunit", this._onActivateAdUnit.bind(this), false);
    mediaPlayer.adHandlerPlugin.addEventListener("deactivateadunit", this._onDeactivateAdUnit.bind(this), false);
},

_onActivateAdUnit: function (e) {
    this.timeRemainingChangedEventHandler = this._onAdRemainingTimeChange.bind(this);
    e.detail.player.addEventListener("adremainingtimechange", this.timeRemainingChangedEventHandler, false);
},

_onDeactivateAdUnit: function (e) {
    e.detail.player.removeEventListener("adremainingtimechange", this.timeRemainingChangedEventHandler, false);
    this.timeRemainingChangedEventHandler = null;
},

_onAdRemainingTimeChange: function (e) {
    var vpaid = e.target;
    var timeRemainingSeconds = Math.ceil(vpaid.adRemainingTime / 1000);
    console.log("This ad will end in " + timeRemainingSeconds + " seconds");
},

In Xaml applications:

public MainPage(){
    this.InitializeComponent();
    
    // get a reference to the AdHandlerPlugin. Note: this example assumes it was created in Xaml but it could also be created in code.
    var adHandler = player.GetAdHandlerPlugin();
    // wire up the events that fire when a new ad starts and finishes.
    adHandler.ActivateAdUnit += adHandler_ActivateAdUnit;
    adHandler.DeactivateAdUnit += adHandler_DeactivateAdUnit;
}
        
void adHandler_ActivateAdUnit(object sender, VideoAdvertising.ActivateAdUnitEventArgs e)
{
    // we now have an ad player that will raise it's own event when time remaining changes.
    e.Player.AdRemainingTimeChange += Player_AdRemainingTimeChange;
}

void adHandler_DeactivateAdUnit(object sender, DeactivateAdUnitEventArgs e)
{
    e.Player.AdRemainingTimeChange -= Player_AdRemainingTimeChange;
}

void Player_AdRemainingTimeChange(object sender, object e)
{
    // all ad players implement IVpaid. Use this interface to get at the time remaining.
    var player = (IVpaid)sender;
    System.Diagnostics.Debug.WriteLine(string.Format("This ad will end in {0:00} seconds", player.AdRemainingTime.TotalSeconds));
}

In the examples above, the time remaining is sent to the debug windows. In your app you should show this in your HTML or Xaml page.

Warning: be careful to hide this text when the ad has completed; simply clearing out the text will still leave an invisible control on your page which can hurt performance when on top of a full screen video.

Last edited Aug 27, 2013 at 6:24 PM by timgreenfield, version 3