How to build your first HTML5 Windows 8 Smooth Streaming Application
In this post I'll cover how to build a basic HTML5 Windows 8 Smooth Streaming application using the Microsoft Smooth Streaming Client SDK Beta for Windows 8. This basic application enables the HTML5 <Video> tag with Smooth Streaming in Windows 8 apps. For rich applications and general player development, I strongly encourage you to use the Microsoft Media Platform Player Framework. You can get more information about the Player Framework here.
Later, I will cover "How to build a basic XAML Smooth Streaming Windows 8 application" in a separate post.
Note: This post is updated for Windows 8 RP compatability and tested with the Windows 8 Release Preview and Visual Studio 11 RC releases. Unexpected results might occur if you run the SDK on different versions of this software.
Prerequisites
· Windows 8 Release Preview (RP) (32-bit or 64-bit) OS. You can get from here.
· You should have either Visual Studio 2012 RC or Visual Studio Express 2012 RC for Windows 8 installed on Windows 8. You can get more information on this here.
· Install the "Microsoft IIS Smooth Streaming Client SDK Beta 1 for Windows 8 " from here.
· Basic JavaScript knowledge is required.
Note: This post is based on pre-release (Beta) builds of software and components; therefore, some features might not be available or supported for some devices and subject to change without notification.
Create the JavaScript Windows Store Project
The very first thing you need to do is create a JavaScript Windows Store project.
1. Open Visual Studio Express 2012 or Visual Studio 2012 .
2. Go to File –> New Project.
3. Chose JavaScript as the project Type and then select Windows Store. Choose Blank Application, name it SS_Metro_Player.
4. In your project, go to references (Windows à Extensions) and add "Microsoft Smooth Streaming Client SDK Beta 1 for Windows 8", "Microsoft Visual C++ Runtime Package" and "Windows Library for JavaScript 1.0"to the references.
5. Add "Home or Work Networking" capabilities to your application. (This step is needed if you want to support local source URLs. Ex: http://mycompany/video1.ism/manifest.)
Double-click "package.appxmanifest" file and then go to Capabilities. Mark the check box "Home or Work Networking"
Note: If you want to support enterprise authentication protected sources, you should consider adding "Enterprise Authentication" to capabilities as well. More information can be found here.
Register the Smooth Streaming Byte Stream Handler
Next, you must register the Smooth Streaming Byte Stream handler, which identifies the URL or MIME-type combination that is sent to the Smooth Streaming extension.
To do this:
Open default.js in your project and add the following:
Code Snippet
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
// Smooth Streaming Byte Stream Handler Registration
var plugins = new Windows.Media.MediaExtensionManager(); try { plugins.registerByteStreamHandler("Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler", ".ism", "text/xml");
plugins.registerByteStreamHandler("Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler", ".ism", "application/vnd.ms-sstr+xml");
}catch (e) {
alert.message(e.message);
}
// Smooth Streaming Byte Stream Handler Registration
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
})();
Add the HTML5 Video Element
Next, you need to add Html5 video element.
To do this; open default.html and add the <video> tag:
Code Snippet
<!DOCTYPE html> <html>
<
head>
<meta charset="utf-8" />
<title>SS_Metro_Player</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- SS_Metro_Player references -->
<link href="/css/default.css" rel="stylesheet" /><script src="/js/default.js"></script> </head>
<
body>
<!-- Video tag -->
<
video id="Video1" autoplay="autoplay" controls="controls" src="http://mediadl.microsoft.com/mediadl/iisnet/smoothmedia/Experience/BigBuckBunny_720p.ism/Manifest" style="height: 100%; width: 100%; margin: auto"></video>
<!-- Video tag --></body> </html>
The above example has a video element with default controls (Play/Pause/Seek/Volume Control) that consumes a Smooth Streaming source. This is all you need for a basic layout.
Compile and Run the Application
Change your platform type to x64, x86 or ARM depending on which platform you're targeting, and then build your project.
Leaving the Any CPU option selected will display the following warning in the References section in Visual Studio:
You might get compilations errors and warnings such as the following:
The SDK depends on the Microsoft Visual C++ Runtime Package. Failing to add this dependency to the project references will cause Visual Studio to generate compilation errors and warnings, such as the following:
Note: Building in 'Any CPU' will fail with following compile errors.
-
Could not find SDK “Microsoft.VCLibs, Version=11.0″.
-
“APPX” attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no “APPX” attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.
-
The referenced component ‘Microsoft Visual C++ Runtime Package’ could not be found.
-
Manifest references file 'Microsoft.Media.SmoothStreaming.dll' which is not part of the payload.
Note: There is a known issue regarding to autoplay="autoplay".Sometimes it won't work and you must click Play.
Summary
In this post, we reviewed how to create a basic HTML5 Windows 8 Smooth Streaming application with default controls for playback of Smooth Streaming content.
Here is what you will see after completing all of the steps:
Let me know if you have issues or need further help.
Note: These are just samples meant for educational purposes and there's no guarantee conferred on the code quality. All the samples are based on pre-release (Beta) builds of software and components; therefore, some features might not be available or supported for some devices and subject to change without notification.