Building your first Smooth Streaming Player using SSME

Posted: Oct 14, 2009  17 comments  

Average Rating

Tags
Media
Smooth Streaming
Smooth Streaming Player Development Kit
SSME

Share this Post

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

  1. 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.
  2. Install the Smooth Streaming Developer Kit available here.
  3. 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:

  1. Open Visual Web Developer or Visual Studio.
  2. Go to: File –> New Project.
  3. Chose Visual C# as project Type and then select Silverlight. Choose Silverlight Application, name it SimplePlayer.
  4. In your project go to references and add a reference to Microsoft.Web.Media.Smoothstreaming.dll (available as a part of Player development Kit)
  5. Modify MainPage.xaml as under. Set the SmoothStreamingSource property in XAML to the location of the Smooth Streaming content. Replace <<Add your URL here>> with the URL of the content (E.g., it will look something like http://example.com/a.isml/Manifest)
Code Snippet
  1. <UserControl x:Class="SimplePlayer.MainPage"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.     xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
  6.     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  7.   <Grid x:Name="LayoutRoot">
  8.     <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="<<Add your URL here>>" Grid.Row="0" />
  9.   </Grid>
  10. </UserControl>

This is all you need to get a basic playback working with Smooth Streaming Media Element.

Adding Playback Controls to your Player

Next, once you have the basic playback working, you may want to add some basic controls like Play/Pause button, Stop Button and Volume Control.

Here is what you will see after completing the steps below:

image

The UI layout

Here are the pieces we need for this in terms of the layout.

  1. Have portion of the screen, which will display the slider control for volume and Play/Pause and Stop buttons
  2. We need a portion for the Video to display
  3. We need to hook these buttons/slider to SSME

For the overall layout, we are using XAML constructs of Stack Panels. here is how we do it in this example:

 

Code Snippet
  1. <UserControl x:Class="SimplePlayer.MainPage"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.     xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
  6.     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  7.   <Grid x:Name="LayoutRoot">
  8.         <Grid.RowDefinitions>
  9.             <RowDefinition Height="0.95*"></RowDefinition>
  10.             <RowDefinition Height="0.05*"></RowDefinition>
  11.         </Grid.RowDefinitions>
  12.         <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="<<Add your URL here>>" Grid.Row="0" />
  13.         <StackPanel Orientation="Horizontal" Grid.Row="1">
  14.             <TextBlock x:Name="Volume" VerticalAlignment="Center" Text="Volume" Width="50" />
  15.             <Slider x:Name="VolumeBar" Width="60" Value="{Binding Path=Volume, ElementName=SmoothPlayer, Mode=TwoWay}" />
  16.             <Button x:Name="PlayButton" Width="50" Click="PlayButton_Click" Loaded="PlayButton_Loaded"/>
  17.             <Button x:Name="StopButton" Content="Stop" Width="50" Click="StopButton_Click" />
  18.         </StackPanel>
  19.     </Grid>
  20. </UserControl>

 

 

 

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:

Code Snippet
  1. <Slider x:Name="VolumeBar" Width="60" Value="{Binding Path=Volume, ElementName=SmoothPlayer, Mode=TwoWay}" />

If you see, all we are doing here is saying that bind the Slider Value to the SmoothPlayer’s Volume  Path (or property).

For the Play / Pause and Stop buttons, we take a slightly different approach here:

Code Snippet
  1. <Button x:Name="PlayButton" Width="50" Click="PlayButton_Click" Loaded="PlayButton_Loaded"/>
  2. <Button x:Name="StopButton" Content="Stop" Width="50" Click="StopButton_Click" />

Here we want the following to happen:

  • 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
  1. private void PlayButton_Loaded(object sender, RoutedEventArgs e)
  2. {
  3.     //We need to prepopulate the value of Play/Pause button content, we need to check AutoPlay
  4.     switch (SmoothPlayer.AutoPlay)
  5.     {
  6.         case false:
  7.             PlayButton.Content = "Play";
  8.             break;
  9.         case true:
  10.             PlayButton.Content = "Pause";
  11.             break;
  12.     }
  13. }

 

PlayButton_Click

Code Snippet
  1. private void PlayButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     //Monitor the state of the content to determine the right action to take on this button being clicked
  4.     //and then change the text to reflect the next action
  5.     switch (SmoothPlayer.CurrentState)
  6.     {
  7.         case MediaElementState.Playing:
  8.             SmoothPlayer.Pause();
  9.             PlayButton.Content = "Play";
  10.             break;
  11.         case MediaElementState.Stopped:
  12.         case MediaElementState.Paused:
  13.             SmoothPlayer.Play();
  14.             PlayButton.Content = "Pause";
  15.             break;
  16.     }
  17. }

 

StopButton_Click

Code Snippet
  1. private void StopButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     //This should simply stop the playback
  4.     SmoothPlayer.Stop();
  5.     //We should also reflect the chang on the play button
  6.     PlayButton.Content = "Play";
  7. }

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.

The project sample for this example is availble here(SimplePlayer.zip).

Note: These are just samples meant for educational purposes and there is no guarantee conferred on the quality of code

Comments

Thanks for reporting that. I will get the sample updated as well.

Oct 24 2009 by vsood

hey, vsood. thanks for your tutorial. I have encounter a problem, I just follow all step in your tutorial. But after I debug and run in firefox, no video display, only the black screen come out and the row 2 element. I put all the big buck bunny file(.ism, .ismc, few .ismv) into C:\inetpub\wwwroot . The url I write is "localhost/.../Manifest". So, is it somewhere I doing wrong?

When I run the Big Buck Bunny example which is download from IIS website and run in localhost, it work fine and video displayed.  

Dec 07 2009 by sctl

Hi 'sctl'

Can you install Fiddler (fiddler2.com) or some other HTTP monitoring tool to see if you are getting any network errors. The most common issue I have seen is setup of crossdomain.xml / clientaccesspolicy.xml. By default, if these are not setup properly and you try to request SS content from a different domain then the xap, SL disallows that.

Regards,

Vishal

Dec 07 2009 by vsood

Hi Vishal,

Thanks for the tutorial.

It was clear and easy to follow.

I have a question.

The code below works ok; however if I want to use a template (see 9th line) .

Can I use a template?

if yes, then how?

public MainPage()

       {

           InitializeComponent();

           SmoothStreamingMediaElement myPlayer = new SmoothStreamingMediaElement();

           LayoutRoot.Children.Add(myPlayer);

           myPlayer.HorizontalAlignment = HorizontalAlignment.Left;

           myPlayer.VerticalAlignment = VerticalAlignment.Top;

           myPlayer.Width = 300;

           myPlayer.Height = 200;

           myPlayer.Stretch = Stretch.UniformToFill;

           myPlayer.Template = <What do I need to enter here?>

           myPlayer.SmoothStreamingSource = new Uri("<ServerName>/Big Buck Bunny.ism/Manifest");

           myPlayer.AutoPlay = true;            

       }

Thanks again

Luis E Leal

Dec 08 2009 by luiscal

hi guys

i can't get the SS player working, i get a black screen but no video

i've tried different URL's in the SmoothStreamingSource" fields

on "localhost/Big%20Buck%20Bunny.ism/manifest" i get an error

"Microsoft JScript runtime error: Unhandled Error in Silverlight Application AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 8 Position: 103]   at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)"

on trying "localhost/.../manifest", i get only a black screen, and no activity on the network either, checked via fiddler

on trying with a published site, fiddler shows two requests for "publishedsite/clientaccesspolicy.xml" and publishedsite/crossdomain.xml

i can't figure this out

does any1 know wat to do ?

Dec 21 2009 by prateek s

Hi Vishal,

We have build an enterprise application using standard MediaElement and are interested in adapting Smooth streaming.

But our app is going to have mixed type of content (smooth streaming encoded files as well as plain wmv files).

We found that SSME can not play wmv files and it will be very hard for us to keep switching media elements based on content type as lot of functionality has been build around media element.

How do we support both types of content without modifying the code too much? Please suggest some solution.

Regards,

Sushil

Dec 21 2009 by SushilJoshi

Hi Vishal,

Thanks for the tutorial. I was able to replicate and it worked.

My question is:

Can you use the templates (like BlackGlass) with the SmoothStreamingMediaElement?

Thanks again

Luis

Dec 21 2009 by luiscal

Hello,

nice example, but I allways get the error "Reached the end of known chunk list with 6 consecutive chunk errors. Buffer cannot progress". If I start my demo video (encoded with Expression Encoder 3) with the Silverlight-Tempate given by Encoder 3.0, it works fine - but if I try to set the SmoothStreamingSource in my vs2008-project, the error accours. So please is there any idea to solve this problem? I'm searching since hours.

Dec 24 2009 by meldur

Sorry for responding late. For some reason, I found a lot of comments stuck pending approval. Looks like I missed these while I was on vacation

@luiscal - I will follow up on this.

@prateek s - SL does not allow cross domain requests. If you wish to do crossdomain requests. SL will first try to look for ClientAccesPolicy.xml and then Crossdomain.xml. If it does not find those, it will fail the request. There are two ways to get this resolved.

1.) Host your SL application on same server as content

2.) Setup a CAP.xml file - I found this link on binging - blogs.msdn.com/.../silverlight-2-beta-2-clientaccesspolicy-xml.aspx. You can use the forums for further issues - forums.iis.net/1145.aspx

@Sushil Doshi SSME does play wmv files. You need to set the .Source property. Are you seeing any particular issues. Could you please post on forums here - forums.iis.net/1145.aspx

@lusical not as of now. BlackGlass Template today does not use SSME

@meldur  looks like the stream is un available for some reason. Try fiddler and see what requests to server are failing. Please start a thread on forums.iis.net/1145.aspx if you still face issues

@Anonymouse - the url for a stream is typically http://<Server>/<path>/<streamName>.ism/Manifest. The /Manifest is needed at the end. The stream name is same as the name of the ism file.

Jan 14 2010 by vsood

Thanks, Vishal.

As the same as  luiscal, could you show us the BlackGlass video player code?

I have a question about the SmoothStreamingMediaElement contron applying now, the event PlaybackTrackChanged and DownloadTrackChanged can only triggered once after the video opened. Why the two events are not triggered again when the video playing?

Waiting for your reply.

Thanks.

Jan 18 2010 by Jacky Xu

@Jacky Xu - they should be triggering. In our players, we add the event handler in the Loaded event processing and it seems to always fire. Could you give me more details on your code that is not working?

@Alex thanks. Good luck :)

Jan 21 2010 by vsood

@Anonymous. Are you using Beta2? Try using EndPosition.

Feb 10 2010 by vsood

Hi,

I get "Failed to download manifest: d" error. I don't know how I could solve this problem. First off, the manifest file is in the right location and server call works (http://<servername>/SilverlightVideo/Default.html). I tried this for both testing server and localhost. Secondly, I typed the URL for the manifest file and the browser shows manifest-XML. So it should be working except that it doesn't. Can you help? What am I missing or doing wrong?

Thanks.

Mar 17 2010 by ericha1981

I get "Failed to download manifest: d" error. Can anybody tell me what I should do? I know my manifest file's in the folder and NOT corrupted because <servername>/SilverlightVideo/Default.html works. It's the above approach from the silverlight project that throws me an error. The code is exactly the same except the source path.

Mar 17 2010 by ericha1981

SSME doesn't seem to detect the markers that have already been encoded. I use MarkersReached element to check this. SmoothPlayer.Markers.Count returns 0. I get the correct number of markers when I use MediaElement. Do you know why?

Mar 23 2010 by ericha1981

Hi

Could you explain me what is wrong in my code ?

Client Side:

============

public void Play()

       {

           SmoothPlayer.SmoothStreamingSource =

               new Uri(HtmlPage.Document.DocumentUri.AbsoluteUri.Replace(HtmlPage.Document.DocumentUri.AbsolutePath, "") + "/ashx/GetCSMfile.ashx");

       }

Server side:

=============

GetCSMfile.ashx

       public void ProcessRequest(HttpContext context)

       {

           try

           {

               context.Response.ContentType = "text/xml";

               context.Response.WriteFile(AppDomain.CurrentDomain.BaseDirectory + "logs/" + "Big Buck Bunny.csm",true);

           }

           catch (Exception e)

           {

           }                                                

       }

It return an error "Reached the end of known chunk list with 1 consecutive chunk errors"

But if I do

           SmoothPlayer.SmoothStreamingSource =

               new Uri(HtmlPage.Document.DocumentUri.AbsoluteUri.Replace(HtmlPage.Document.DocumentUri.AbsolutePath, "") + "/logs/Big Buck Bunny.csm");

it is working fine.

Jun 09 2010 by alexSol

I want to add a  video player to  my website for playing smooth streamed content..I am building

a silverlight application in visual studio 2010.

I have read the tutorials and follwed the steps. It asks to include reference to the dll Microsoft.Web.Media.Smoothstreaming.dll, whcih I found in the IIS Smooth Streaming Client SDK.

I have added the reference. and in the silverlight application MainPage I wrote

xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"

But the project gives errors on building it says

Assembly Microsoft.Web.Media.SmoothStreaming could not be found,verify you are not missing an assembly

reference. also verify that your project and all reference libraries have been build

Please guide me how can I remove this error....I am new to this so plz plz help...

Nov 24 2011 by saneeha

Submit a Comment

  • Plain text is accepted.
  • URLs starting with http:// are converted to links.