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.
- Install the Smooth Streaming Developer Kit available 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 <<Add your URL here>> with the URL of the content (E.g., it will look something like http://example.com/a.isml/Manifest)
- <UserControl x:Class="SimplePlayer.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
- mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
- <Grid x:Name="LayoutRoot">
- <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="<<Add your URL here>>" Grid.Row="0" />
- </Grid>
- </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:
The UI layout
Here are the pieces we need for this in terms of the layout.
- Have portion of the screen, which will display the slider control for volume and Play/Pause and Stop buttons
- We need a portion for the Video to display
- 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:
- <UserControl x:Class="SimplePlayer.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
- mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
- <Grid x:Name="LayoutRoot">
- <Grid.RowDefinitions>
- <RowDefinition Height="0.95*"></RowDefinition>
- <RowDefinition Height="0.05*"></RowDefinition>
- </Grid.RowDefinitions>
- <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="<<Add your URL here>>" Grid.Row="0" />
- <StackPanel Orientation="Horizontal" Grid.Row="1">
- <TextBlock x:Name="Volume" VerticalAlignment="Center" Text="Volume" Width="50" />
- <Slider x:Name="VolumeBar" Width="60" Value="{Binding Path=Volume, ElementName=SmoothPlayer, Mode=TwoWay}" />
- <Button x:Name="PlayButton" Width="50" Click="PlayButton_Click" Loaded="PlayButton_Loaded"/>
- <Button x:Name="StopButton" Content="Stop" Width="50" Click="StopButton_Click" />
- </StackPanel>
- </Grid>
- </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:
- <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:
- <Button x:Name="PlayButton" Width="50" Click="PlayButton_Click" Loaded="PlayButton_Loaded"/>
- <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
- private void 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)
- {
- case false:
- PlayButton.Content = "Play";
- break;
- case true:
- PlayButton.Content = "Pause";
- break;
- }
- }
PlayButton_Click
- private void 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)
- {
- case MediaElementState.Playing:
- SmoothPlayer.Pause();
- PlayButton.Content = "Play";
- break;
- case MediaElementState.Stopped:
- case MediaElementState.Paused:
- SmoothPlayer.Play();
- PlayButton.Content = "Pause";
- break;
- }
- }
StopButton_Click
- private void 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.
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