Creating a Basic Smooth Streaming Store App

Article
09/19/2014

In this procedure, you will create a Windows Store app with a MediaElement control to play non-encrypted Smooth Stream content. The running app looks like this:

Figure 1. Smooth Streaming App

This topic contains the following procedures:

Create a Windows Store project.
Design the user interface (XAML).
Modify the code behind file.
Add Media Element event handlers.
Compile and test the application.

To create a Windows Store project

Start Visual Studio 2013.
On the menu bar, choose FILE, New, Project.
In the New Project dialog, under the Visual C# node, choose the Windows Store node.
In the Templates pane, choose Blank App (XAML) and change the name of the project to SSPlayer.
Enter a location for the project, or leave it at the default location.
Select the Create directory for solution check box.
Choose the OK button.

Note

If you are creating a Windows Store app in Visual Studio 2013 for the first time and a dialog box opens that informs you that you must get a developer license for Windows 8.1, choose I Agree. You will be asked to log into your Microsoft account with your username and password. Once you do so, your developer license will be downloaded to your machine. This developer license has an expiration date, so you will need to renew your license before it expires to continue developing Windows Store apps.

To add a reference to the Smooth Streaming Client SDK

In Solution Explorer, open the shortcut menu for SSPlayer, and then choose Add Reference.
In the Reference Manager dialog, choose Windows, Extensions.
Choose Microsoft Smooth Streaming Client SDK for Windows 8.1 and Microsoft Visual C++ 2013 Runtime Package for Windows.
Choose the OK button.

After adding the references, you must select the targeted platform (x64, x86, or ARM). Adding references does not work for the Any CPU platform configuration, and you will see a yellow warning mark next to these added references in Solution Explorer.

To select the targeted platform

On the menu bar, choose BUILD, Configuration Manager.
In the Configuration Manager dialog, under Active solution platform, choose the specific platform for your Windows Store app (x64, x86, or ARM).
Choose the Close button.

To design the player user interface

In Solution Explorer, open the shortcut menu for MainPage.xaml choose Open.

Locate the <Grid> and </Grid> tags in the XAML file, and paste the following code between the two tags:

<Grid.RowDefinitions>
  <RowDefinition Height="20"/>
  <!-- spacer -->
  <RowDefinition Height="50"/>
  <!-- media controls -->
  <RowDefinition Height="100*"/>
  <!-- media element -->
  <RowDefinition Height="80*"/>
  <!-- media stream and track selection -->
  <RowDefinition Height="50"/>
  <!-- status bar -->
</Grid.RowDefinitions>

<StackPanel Name="spMediaControl" Grid.Row="1" Orientation="Horizontal">
  <TextBlock x:Name="tbSource" Text="Source :  " FontSize="16" FontWeight="Bold" VerticalAlignment="Center" />
  <TextBox x:Name="txtMediaSource" Text="http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest" FontSize="10" Width="700" Margin="0,4,0,10" />
  <Button x:Name="btnSetSource" Content="Set Source" Width="111" Height="43" Click="btnSetSource_Click"/>
  <Button x:Name="btnPlay" Content="Play" Width="111" Height="43" Click="btnPlay_Click"/>
  <Button x:Name="btnPause" Content="Pause"  Width="111" Height="43" Click="btnPause_Click"/>
  <Button x:Name="btnStop" Content="Stop"  Width="111" Height="43" Click="btnStop_Click"/>
  <CheckBox x:Name="chkAutoPlay" Content="Auto Play" Height="55" Width="Auto" IsChecked="{Binding AutoPlay, ElementName=mediaElement, Mode=TwoWay}"/>
  <CheckBox x:Name="chkMute" Content="Mute" Height="55" Width="67" IsChecked="{Binding IsMuted, ElementName=mediaElement, Mode=TwoWay}"/>
</StackPanel>

<StackPanel Name="spMediaElement" Grid.Row="2" Height="435" Width="1072"
            HorizontalAlignment="Center" VerticalAlignment="Center">
  <MediaElement x:Name="mediaElement" Height="356" Width="924" MinHeight="225"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                AudioCategory="BackgroundCapableMedia" />
  <StackPanel Orientation="Horizontal">
    <Slider x:Name="sliderProgress" Width="924" Height="44"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            PointerPressed="sliderProgress_PointerPressed"/>
    <Slider x:Name="sliderVolume"
            HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Vertical"
            Height="79" Width="148" Minimum="0" Maximum="1" StepFrequency="0.1"
            Value="{Binding Volume, ElementName=mediaElement, Mode=TwoWay}"
            ToolTipService.ToolTip="{Binding Value, RelativeSource={RelativeSource Mode=Self}}"/>
  </StackPanel>
</StackPanel>

<StackPanel Name="spStatus" Grid.Row="4" Orientation="Horizontal">
  <TextBlock x:Name="tbStatus" Text="Status :  "
     FontSize="16" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
  <TextBox x:Name="txtStatus" FontSize="10" Width="700" VerticalAlignment="Center"/>
</StackPanel>

The MediaElement control is used to playback media. The slider control named sliderProgress can be used to control the media progress.

Choose the CTRL+S keys to save the file.

The MediaElement control does not support Smooth Streaming content out-of-box. To enable the Smooth Streaming support, you must register the Smooth Streaming byte-stream handler by file name extension and MIME type. To register, you use the MediaExtensionManager.RegisterByteStremHandler method of the Windows.Media namespace.

In this XAML file, some event handlers are associated with the controls. You must define those event handlers.

To modify the code behind file

In Solution Explorer, open the shortcut menu for MainPage.xaml, and then choose View Code.
At the top of the file, add the following statement:
```
using Windows.Media;
```

At the beginning of the MainPage class, add the following data member:

private MediaExtensionManager extensions = new MediaExtensionManager();

At the end of the MainPage constructor, add the following lines:

extensions.RegisterByteStreamHandler("Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler", ".ism", "text/xml");
extensions.RegisterByteStreamHandler("Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler", ".ism", "application/vnd.ms-sstr+xml");

At the end of the MainPage class, paste the following code:

#region UI Button Click Events
private void btnPlay_Click(object sender, RoutedEventArgs e)
{
  mediaElement.Play();
  txtStatus.Text = "MediaElement is playing ...";
}

private void btnPause_Click(object sender, RoutedEventArgs e)
{
  mediaElement.Pause();
  txtStatus.Text = "MediaElement is paused";
}

private void btnSetSource_Click(object sender, RoutedEventArgs e)
{
  sliderProgress.Value = 0;
  mediaElement.Source = new Uri(txtMediaSource.Text);

  if (chkAutoPlay.IsChecked == true)
  {
    txtStatus.Text = "MediaElement is playing ...";
  }
  else
  {
    txtStatus.Text = "Click the Play button to play the media source.";
  }
}

private void btnStop_Click(object sender, RoutedEventArgs e)
{
  mediaElement.Stop();
  txtStatus.Text = "MediaElement is stopped";
}

private void sliderProgress_PointerPressed(object sender, PointerRoutedEventArgs e)
{
  txtStatus.Text = "Seek to position " + sliderProgress.Value;
  mediaElement.Position = new TimeSpan(0, 0, (int)(sliderProgress.Value));
}
#endregion

The sliderProgress_PointerPressed event handler is defined here, although it will not be used in this example.

Choose the CTRL+S keys to save the file.

To monitor the MediaElement status, especially the error messages, you can add the Media Element event handlers.

To add Media Element event handlers

In Solution Explorer, open the shortcut menu for MainPage.xaml, and then choose View Code.

At the end of the MainPage class, add the following event handlers:

#region Media Element Event Handlers
private void MediaOpened(object sender, RoutedEventArgs e)
{
  txtStatus.Text = "MediaElement opened";
}

private void MediaFailed(object sender, ExceptionRoutedEventArgs e)
{
  txtStatus.Text= "MediaElement failed: " + e.ErrorMessage;
}

private void MediaEnded(object sender, RoutedEventArgs e)
{
  txtStatus.Text ="MediaElement ended.";
}
#endregion Media Element Event Handlers

At the end of the MainPage constructor, add the following code to subscript to the events:

mediaElement.MediaOpened += MediaOpened;
mediaElement.MediaEnded += MediaEnded;
mediaElement.MediaFailed += MediaFailed;

Choose the CTRL+S keys to save the file.

To compile and test the app

On the menu bar, choose BUILD, Configuration Manager.
Change Active solution platform to match your development platform.
Choose the F6 key to compile the project.
Choose the F5 key to run the application.
At the top of the app, you can either use the default Smooth Streaming URL or enter a different one.
Choose Set Source.

Because Auto Play is enabled by default, the media plays automatically. You can control the media using the Play, Pause, and Stop buttons. You can control the media volume using the vertical slider. However, the horizontal slider for controlling the media progress is not fully implemented in this procedure.

Note

This procedure creates a minimal Smooth Streaming content app. For more information on how to add a slider bar to control the media progress, how to select Smooth Streaming streams, and how to select Smooth Streaming tracks, see How to Build a Smooth Streaming Windows Store Application.

In this procedure, you used a MediaElement control to playback un-encrypted Smooth Streaming content. In the next procedure, you will add code to enable playback of PlayReady protected Smooth Streaming content.

Share via