Enhancing Media Experience in Silverlight with Microsoft Media Platform (MMPPF)

• Download source code - 3.12 MB
• Download latest version of source code
• Live demo

Introduction

When Silverlight was introduced, it was considered as a Player Framework because of its capability to handle Rich media. It is one of the first technologies to handle true 720p and 1080p HD media. Since its evolution from Silverlight 1 to Silverlight 5, the digital media experience has improved a lot. This post we will take a dig into the media concepts and its integration with Silverlight along with the various options available.

This post will focus extensively on the Microsoft Media Platform Framework from Microsoft, an Open Source player framework, and its implementation.

Media, Streaming, Silverlight… Journey So Far

Silverlight 1 introduced the MediaElement object to enable rich media experience. MediaElement is a control region which enables the rendering of audio as well as video files. It supports Windows Media Video (WMV), Windows Media Audio (WMA), and MP3 files/ Containers. A detailed list of the formats and protocols supported can be found in this link: Supported Media Formats, Protocols, and Log Fields. The MediaElement object supports download and streaming of media content to the client side over HTTP. Other than these specified container types, Silverlight provides an option for MediaStreamSource, which enables you to deliver media that doesn’t come under the supported container types.

Other than format, another important aspect of media rendering is how the content is going to be delivered at the client. This is what is called the delivery method. There are various methods of delivery of content such as Streaming, Progressive Download, Smooth Streaming, etc. The MediaElement decides on the delivery method based on the file format type and the URI.

The default delivery behaviour of MediaElement is progressive download. If you use the MediaElement with a URL that starts with http: or https:, Silverlight begins a progressive download. If you use the MediaElement with a URL that starts with mms:, Silverlight attempts to stream it and falls back on a progressive download if streaming fails. Make a note that MediaElement doesn’t support Smooth Streaming.

Before going forward, let us have a quick look at the various delivery methods and a comparison.

If you want to explore in detail the above topic, have a look at the whitepaper published at the Microsoft portal.

In the age of live streaming and on demand video, Smooth Streaming comes to rescue which delivers the best on a given network and client environment. This leads us to the Microsoft Media Platform based player which makes it possible at the client side to recognize the source content and enable Smooth Streaming.

Microsoft Media Platform: Player Framework 2.5

Microsoft Media Platform (MMPPF) is an Open Source project from Microsoft that supports media plug-ins such as Smooth Streaming, Progressive Download, and Windows Media streaming.

Is this sufficient to use MMPPF? Why one should you use the framework and what are the benefits it offer? The list below shows some of its profound features in the current version 2.5 that are worth a shout out:

• Support for Windows Phone as well as Silverlight
• Media plug-ins based on your choice (Smooth Streaming/Progressive Download/WMS)
• Slow Motion
• Playline Marker
• Customization and Branding
• Logging
• Advertisement Support
• Extensibility with Plug-in
• Streaming Graph Overlay

A more detailed description of the feature list can be found here.

IIS Smooth Streaming

Make a note that regular streaming, progressive download are the default and come without any extra effort. Smooth streaming requires the files to be stored as chunks of different bit rates so that they can be streamed smoothly to the client. Here the client chooses which bit rate chunk to be downloaded based on the client environment.

But sometimes managing so much file chunks can be a difficult task at the server so IIS smooth streaming comes into picture. With IIS smooth streaming, file chunks are created virtually upon client request, but the actual video is stored on the disk as a single full-length file per encoded bit rate. This offers tremendous file-management benefits.

But for IIS smooth streaming, the IIS server needs to be adequately configured and the video file needs to be encoded. There are many server / CDNs available which offer smooth streaming service, however if you want to configure your server to support smooth streaming, then refer to this article.

Player Download and CodePlex Source

Before jumping to a sample application, let me share with you the download link and project hosted at CodePlex. It comes as an MSI package which can be installed. Basically, it is a set of DLLs which can be referred in the project based on the requirements.

• Download installation – http://smf.codeplex.com/releases/view/63434#DownloadId=222617
• Project on CodePlex – http://smf.codeplex.com/

Creating a Simple Media Player Project

Setting up the Project

You can download the binaries or the complete MSI package which will add the MMPPF template to the project window. Once you download the binaries as mentioned above, you will find a set of assemblies which can be used based on the scenario. But for a very basic application, we need to refer to the following assemblies in the project.

Once you drag and drop Microsoft.SilverlightMediaFramework.Core.dll to the toolbox, the SMFPlayer control allows you to use the control directly over page. (As the project was previously called Silverlight Media Player (SMF), don’t bother about the control name).

On use of this control, VS will include the xmlns:smf=http://schemas.microsoft.com/smf/2010/xaml/player namespace.

<Grid x:Name="LayoutRoot" Background="White">
    <smf:SMFPlayer HorizontalAlignment="Stretch" Margin="0" 
               Name="sMFPlayer" VerticalAlignment="Stretch" />
</Grid> 

Quick Playing Media Source

PlayList and PlayListItem are the basics of MMPPF. PlayListItem indicates the media source object which is going to be added to the playlist collection of the media. Each individual play item has the option to choose its mode of delivery to the client. The following source shows the creation of a PlaylistItem from a media source:

//Create a new PlayList Item
PlaylistItem item=new PlaylistItem();
item.MediaSource = new Uri("http://manaspatnaik.com/blog/downloads/Demolishor_WMV_HD.wmv");
item.ThumbSource=new Uri("http://manaspatnaik.com/blog/downloads/demolishor.jpg");
item.DeliveryMethod = 
  Microsoft.SilverlightMediaFramework.Plugins.Primitives.DeliveryMethods.Streaming;
 
//Add PlaylistItem to the Media playlist
sMFPlayer.Playlist.Add(item);
sMFPlayer.Play();

Due to security reasons or whatsoever, it does not support a relative source to the playlist; instead, you can use an absolute URI path for the media item. Same as video URI, it does support audio playback.

Playing Smooth Streaming

As I mentioned, IIS based smooth streaming needs the server to be configured, and for demonstration, I am going to use the sample media source hosted over playready.directtaps.net. The smooth streaming media source comes with a .ism extension. Direct use of this extension will not allow you to play the media. Instead, you have to use the complete link including "/Manifest". This manifest file defines the relationships between the media tracks, bit rates, and files in the server.

PlaylistItem item = new PlaylistItem();
item.MediaSource = new Uri("http://playready.directtaps.net/" + 
                   "smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest");
item.ThumbSource = new Uri(thumbImgUri);
item.DeliveryMethod = 
  Microsoft.SilverlightMediaFramework.Plugins.Primitives.DeliveryMethods.AdaptiveStreaming;
 
//Add PlaylistItem to the Media playlist
sMFPlayer.Playlist.Add(item);

Have a look at the difference between progressive download and IIS smooth streaming at the live link provided at the top of this article.

Embedding the Media Player in WordPress or a Non-Silverlight Site

Embedding the smooth streaming media player needs the XAP file which can be downloaded from here. Include the XAP file within the root directory of your hosting provider and in a new WordPress post, switch to HTML view where you can use the following code:

<object data="data:application/x-silverlight-2," height="100%" 
            type="application/x-silverlight-2" width="100%">
    <param name="source" value="SmoothStreamingPlayer.xap" />
    <param name="minRuntimeVersion" value="4.0.50401.0" />
    <param name="autoUpgrade" value="true" />
    <param name="InitParams" 
      value="mediaurl=http://playready.directtaps.net/smoothstreaming/
             TTLSS720VC1/To_The_Limit_720.ism/Manifest" />
</object>

As the above example is for smooth streaming, it supports only ism files, the media source that only support IIS 7 smooth streaming. In case you want to host your own media URL, then it needs a progressive media player which can be downloaded here.

• Sample Embedded player (Smooth Streaming) – Embedded Player.

Final Words

The media player framework offers a lot of features which I have hardly touched, such as Logging, Analytics, and Plug-in. MMPPF is quite promising and a one stop solution for all media rendering activities. Hope this post will give you a complete picture of the media handling capability that Silverlight offers. Please feel free to post your views and comments.

Additional Links and Reading

• Beginner's Guide on Media Technologies - http://msdn.microsoft.com/en-us/library/ms867173.aspx
• Smooth Streaming Assets – http://playready.directtaps.net/smoothstreaming/
• Customizing MMPPF – http://channel9.msdn.com/Events/DevDays/DevDays-2011-Netherlands/Devdays009