Adding VMAP support for Windows 8 video app using Microsoft Media Platform Player Framework

This is a walk-through of how to add VMAP (Digital Video Multiple Ad Playlist) support for your Windows 8 video application using Microsoft Media Platform Player Framework (aka MMPPF). If you want to know more about VMAP standard or overall advertising support for Windows 8 through MMPPF, you could refer to my the other blog.

Pre-request:

1. Microsoft Media Platform Player Framework(download): currently this link points to Player Framework for Windows 8 Preview 5 (Refresh) and you should download and install Microsoft.PlayerFramework.vsix file showed below. It is also extremely useful to download Microsoft.PlayerFramework.Source.zip which is a sample application contain all the features that released.

2. If you are using Smooth Streaming, you will need to download Smooth Streaming client SDK and install it. Currently, the link i have here points to Smooth Streaming SDK Beta 2 released on 8/23/2012. You could always install the latest bits too.

3. This demo is using Visual Studio 2012 RTM and Windows 8 RTM. I don’t know whether there will be problem on other version of the platform. If you found any problem, feel free to comment on my post.

Demo step: this demo shows how to insert Ads according to VMAP file into a .MP4 content. You will need to import Smooth Streaming client SDK if you are inserting Ads into a Smooth Streaming video content.

1. Open Visual Studio 2012 and select File->New project and under JavaScript tab, select Blank App, give any name you want and select ok.

2. In Solution Explorer, right click on reference folder and select Add Reference… You need to add  Microsoft Media Platform:Player Framework and Microsoft Media Platform: Player Framework Advertising Plugin. Player framework uses Plugin Architecture. You only need to install the reference library when you needed.

3. Double click on default.html and add in these references in the <header> section. You will need to refer to both css file and js file. Without referring to css file, you will see Ad misplaced below main content, which should be overlay.

4. Add in the following div into <body> section. We pass in VMAP file source through vmapSchedulerPlugin property.

5. If you take a look at the sample vmap file we provided here, it defines ad should be inserted into main content at the start, 5% of time and 15 sec. That’s how content owner could set how they want the ads to be inserted and video developer could apply VMAP rule accordingly.

6. Now if you hit F5, you will see advertisement gets played in the video according to VMAP file we provide. This first image is about ad gets played at the beginning and the second image is about main content gets played after pre-roll ad.

You could download this project here.

Microsoft Media Platform Player Framework is an opensource project, led by Tim Greenfield.

5 Responses to Adding VMAP support for Windows 8 video app using Microsoft Media Platform Player Framework
  1. Huy Tran Reply

    When i built this app, it has 2 white lines out side the main screen of the video. Do you get that problem?

    • mingfeiy Reply

      It works fine for me. I use the same environment. Did you import VMAP plugin and point to the plugin in html file?

    • mingfeiy Reply

      And if you couldn’t get it working, please send me your code (yanmf at microsoft.com) I will help you debug.

  2. [...] • Adding VMAP support for Windows 8 video app using Microsoft Media Platform Player Framework (link) ... mingfeiy.com/building-video-application-on-windows-8-all-you-need-to-know
  3. [...] VMAP support for Windows 8 video app using Microsoft Media Platform Player Framework (link) Meanwhile,... mingfeiy.com/session-information-for-build-2012

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">