Building your first Smooth Streaming Player using SSME

In this post I plan to cover building a very basic Smooth Streaming Player using Smooth Streaming Media Element (SSME) part of Smooth Streaming Player Development Kit. In other words, building a “Hello World” equivalent for Smooth Streaming Client (“Hello Smooth Streaming”). This post is split into two parts. In the first part, I will be covering how to get basic playback working in a browser window for Smooth Streaming content. This should be really easy as you will see. In the second part, we would add some basic playback controls like Play, Pause, Stop and Volume controls.

Prerequisites

You should either have Visual Web Developer or Visual Studio installed along with Silverlight Tools for Visual Studio. You can get more information on this here.

This is not a XAML overview session so basic XAML knowledge is required.

Building a Simple Smooth Streaming Player for Playback

The very first thing I wanted to cover here was just basic playback. There are no controls. All you get is a browser window that shows the video playing.

The below outlines steps to achieve this:

Open Visual Web Developer or Visual Studio.

Go to: File –> New Project.

Chose Visual C# as project Type and then select Silverlight. Choose Silverlight Application, name it SimplePlayer.

In your project go to references and add a reference to Microsoft.Web.Media.Smoothstreaming.dll (available as a part of Player development Kit)

Modify MainPage.xaml as under. Set the SmoothStreamingSource property in XAML to the location of the Smooth Streaming content. Replace <> with the URL of the content (E.g., it will look something like http://example.com/a.isml/Manifest)

We have a Grid with two rows: the first row is SSME and second is a horizontal Stack Panel that has volume slide and Pause / Stop buttons. This is all we need to get the basic layout.

Linking UI to SSME

The next step after getting the UI is to link it back to SSME. We already know how to play the video in SSME. In this section I would cover how to hook up the buttons and the slider.

Silverlight has a concept of template binding that can be used here. In the case of slider, we have a slider volume UI control and a volume property on SSME. All we need to do here is to tell Silverlight via the XAML to bind the slider value to the volume property on SSME. Here is how we do it:

For the Play/Pause button, we want to do some actions when the button is loaded and then a different action when it is clicked. For this, we hook these actions to PlayButton_Click and PlayButton_Loaded methods in the MainPage.xaml.cs file

For the Stop button we just need to handle the click so we hook up Click with StopButton_Click method.

In the MainPage.xaml.cs file we need to have these methods and do the needful there. Here is what we are doing in this example:

Note: There are other (better) ways of coding this but for simplicity I have tried to keep it very basic for this example

PlayButton_Loaded

Code Snippet

privatevoid PlayButton_Loaded(object sender, RoutedEventArgs e)

{

//We need to prepopulate the value of Play/Pause button content, we need to check AutoPlay

switch (SmoothPlayer.AutoPlay)

{

casefalse:

PlayButton.Content = "Play";

break;

casetrue:

PlayButton.Content = "Pause";

break;

}

}

PlayButton_Click

Code Snippet

privatevoid PlayButton_Click(object sender, RoutedEventArgs e)

{

//Monitor the state of the content to determine the right action to take on this button being clicked

//and then change the text to reflect the next action

switch (SmoothPlayer.CurrentState)

{

caseMediaElementState.Playing:

SmoothPlayer.Pause();

PlayButton.Content = "Play";

break;

caseMediaElementState.Stopped:

caseMediaElementState.Paused:

SmoothPlayer.Play();

PlayButton.Content = "Pause";

break;

}

}

StopButton_Click

Code Snippet

privatevoid StopButton_Click(object sender, RoutedEventArgs e)

{

//This should simply stop the playback

SmoothPlayer.Stop();

//We should also reflect the chang on the play button

PlayButton.Content = "Play";

}

Summary

In this post, we looked at creating a basic player with common controls for playback of Smooth Streaming Content. Let me know if you have issues or need further help. In subsequent posts I would be diving into adding more features into this player.