Getting Started Guide

Player Framework for HTML/JavaScript-based Windows Store applications

1. Make sure you have installed the tools and SDK for Windows 8.

2. Install the Visual Studio Extension SDK (Microsoft.PlayerFramework.vsix) by double clicking on the file.

3. In Visual Studio, create a new project using a Windows Store application template for JavaScript.

js-step-1.png

4. Add 'Microsoft Media Platform: Player Framework' to your project references. Under References --> Windows --> Extensions

js-step-2.png

5. Modify default.html and add the player framework CSS and script references to your HTML page after the required WinJS references.

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- PlayerFramework references -->
<link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-dark.css" rel="stylesheet">
<script src="/Microsoft.PlayerFramework.Js/js/PlayerFramework.js"></script>
6. Modify default.html and add a div tag for your MediaPlayer control.

<div data-win-control="PlayerFramework.MediaPlayer" data-win-options="{ width: 640, height: 360, src: 'http://smf.blob.core.windows.net/samples/videos/wildlife.mp4' }"></div>
Note: There are many more options available to configure the player. See a list of properties in the Player Framework's JavaScript API reference.

7. Make sure WinJS.UI.processAll() is being called in default.js. This function is already called for you in the default application template.

Note: Download the source zip and run the Samples application to view samples that demonstrate the available features of the player framework, custom player styling, and a variety of other use cases.

Adding support for Smooth Streaming

1. Follow the instructions above to create a new application that uses the Microsoft Media Platform Player Framework for JavaScript.

2. Install the Visual Studio Extension SDK for the Smooth Streaming Client SDK (this is a separate download).

3. Add 'Microsoft Smooth Streaming Client SDK' to your project references. Under References --> Windows --> Extensions

4. Add 'Microsoft Media Platform: Player Framework Adaptive Streaming Plugin' to your project references. Under References --> Windows --> Extensions

js-step-3.png

5. Add the following script tag after your existing player framework references.

<!-- PlayerFramework references -->
<link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-dark.css" rel="stylesheet">
<script src="/Microsoft.PlayerFramework.Js/js/PlayerFramework.js"></script>

<!-- PlayerFramework.Adaptive references -->
<script src="/Microsoft.PlayerFramework.Js.Adaptive/js/PlayerFramework.Adaptive.js"></script>
6. Modify the src property of the MediaPlayer control so it uses a valid smooth streaming URL.

<div data-win-control="PlayerFramework.MediaPlayer" data-win-options="{ width: 704, height: 400, isFullScreenVisible: true, src: 'http://mediadl.microsoft.com/mediadl/iisnet/smoothmedia/Experience/BigBuckBunny_720p.ism/Manifest' }"></div>
7. Set your target platform to x86, x64, or ARM. Because the Smooth Streaming Client SDK is written in unmanaged code, AnyCPU will not work and instead you must build your application for each platform that you wish to support.

js-step-4.png
js-step-5.png

That's all you need to get started. Run your application and watch Big Buck Bunny playing in smooth streaming!

Last edited Aug 22, 2013 at 11:27 PM by timgreenfield, version 6