Building your first Smooth Streaming Player using SSME

vsood — Wed, 14 Oct 2009 22:24:00 GMT

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)

Code Snippet

<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:

Code Snippet

<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:

Code Snippet

<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

<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

Code Snippet

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

Code Snippet

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

Code Snippet

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

IIS Smooth Streaming Player Development Kit 1.0 – Beta 1 Released

vsood — Fri, 09 Oct 2009 19:08:00 GMT

Today, we released IIS Media Services 3.0 that supports both On Demand, Live Smooth Streaming and IIS Advanced Logging. Please refer to the announcement of this release in Chris Knowlton’s blog post for details. As a part of this release, we are very both excited and pleased to announce and release a Beta of IIS Smooth Streaming Player Development Kit 1.0. This is intended to aid the development of rich Smooth Streaming players and experiences. This Kit allows you to build players for both On Demand and Live playback with full DVR capabilities, Live Ad Insertion, Multiple Camera Angles and many more such rich functionalities. This Kit is available for download here – Download IIS Smooth Streaming Player Development Kit 1.0 – Beta 1.

The kit includes:

Smooth Streaming Player SDK – This enables developers and designers to build rich Smooth Streaming player experiences. We are providing a .net (Silverlight) based SDK with full XAML support. The core part of this infrastructure is Smooth Streaming Media Element that is similar to Silverlight Media Element if you are already familiar with Silverlight development platform. There is initial documentation of the APIs are available on MSDN.
Push Encoder – This tool allows you to simulate a live stream for testing purposes.
Sample Smooth Streaming Player (built on Smooth Streaming Player SDK) – This is a sample that uses Smooth Streaming Player SDK and enables you to test the IIS Media Services 3.0.

More instructions on using the Sample player and Push Encoder to test Live Smooth Streaming in your environment are available in the walkthrough here.

As I mentioned earlier, the Smooth Streaming Media Element (SSME) APIs provide an easy interface for developers and designers to create rich Smooth Streaming experiences using the Silverlight platform. These APIs provide support for simple operations like Play, Pause and Stop and also more complex ones like scheduling Ads, selecting and tracking bit-rates for Smooth Streaming playback and many more. Please stay tuned on this blog for samples on how to use these APIs to build experiences. I will start with basic playback and progress on to building richer player applications.

In the meantime here is a high level overview of features that SSME supports today:

Basic Playback controls
- APIs like Play, Pause, Stop, etc.
- Events for Playback and Diagnostics
- Properties to track position, etc.
Advanced Playback support
- DVR support for Live Smooth Streaming
- Trick Play: Slow Motion
Monetization
- Ad Playback integration – scheduling capabilities, tracking Ad progress
- Live Ad Insertion w/ Live Smooth Streaming
- Rich Analytics w/ IIS Advanced Logging
Content Protection – PlayReady integration
XAML support for designers
Selecting Tracks for playback (e.g., restrict the bit-rates available, support multiple camera angles in a single stream, etc.)
Support for progressive download Ads/content
Almost all of the Silverlight Media Element APIs are available for Smooth Streaming w/ SSME

Resources

Download IIS Smooth Streaming Player Development Kit 1.0 – Beta 1
API documentation for Smooth Streaming Player SDK
More Information on Smooth Streaming
More Information on Live Smooth Streaming

Hope you have fun using this SDK, the same way we did developing it.

Happy Smooth Streaming.

Video: TechEd NA 2009 - Advanced Video Delivery with IIS

vsood — Sat, 16 May 2009 20:11:00 GMT

Earlier this week I gave a TechEd session on IIS Media Services - Smooth Streaming, Advanced Logging and the IIS Media Services Ecosystem overall. Thanks to everyone who made it to this talk. It was really nice to have you there and your interest in technology was immense.

Here is the recorded session delivered with Smooth Streaming in case you were not able to make it to the talk.

Vishal Sood : Smooth Streaming