How to Create a Media Player in Silverlight
May 6, 2011
Introduction to Multimedia in Silverlight
In this article we will learn about handling and implementing multimedia in a Silverlight application. Source code for creating a simple media player in Silverlight application is provided and explained. With this basic idea you could very well create a complete implementation of a fully sophisticated media player.
For this demonstration I have used Silverlight 4.0 and Visual Studio 2010.
Multimedia Support in Silverlight
Until the introduction of Silverlight there was no prominent Microsoft technology which could handle multimedia files. But with Silverlight a wide range of multimedia support is available which includes video files, audio files and photos.
MediaElement Silverlight Control
In Silverlight the multimedia files can be handled using the MediaElement control. All the developer needs to do is simply drag drop the UI element onto the XAML page and set a few basic properties which enables the media files to be played.
Notable Properties of MediaElement
Below are some of the important properties of the MediaElement control:
Source
This is the first and foremost property which is used to provide the path of the multimedia file which needs to be played.
AutoPlay
This is a Boolean property. When set to True the media file gets played as soon as the MediaElement control is loaded; if the value is set to false then the media file is not played by default.
IsMuted
This is a Boolean property used to specify whether the Media sound should be muted or not.
CacheMode
This property is used to specify whether the media file being played has to be cached or not.
BufferingTime
This is a property used to get or set the buffering time of the media file to be played. So playing the media file would wait until the set time is elapsed.
Notable Events of MediaElement
Below are some of the important MediaElement events that could be very useful which creating a MediaPlayer control in the Silverlight application.
MediaOpened
This event gets fired when the media source of the MediaElement gets opened.
MediaClosed
This event gets fired when the media gets closed after playing is complete. This event can be used to implement resetting the MediaElement's state or to play the next video.
MediaFailed
Any special handling which needs to occur when the media element fails to play the content can be implemented using this event.
CurrentStateChanged
This event gets fired when the current state of the event is changed. For example when the state of the media element is changed from Play to Pause or Stop.
Sample Silverlight Multimedia Application Code
In this section we will create a sample application named SampleMediaPlayer in Silverlight and implement a Simple Media Player.
First, create a Silverlight application and name it as SampleMediaPlayer. Add a sample video file to the Silverlight application. After adding the sample video to the project, right click on the video file and click on properties. The window shown in Fig 1.0 will popup.
Fig 1.0
Select the Build Action as Resource.
Now define the XAML code for the Media player. Below is the code:
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"
mc:Ignorable="d" d:DesignHeight="350" d:DesignWidth="500">
Now let's go ahead and implement the codebehind for the media player:
namespace SimpleMediaPlayer
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
SampleMediaElement.MediaOpened += new RoutedEventHandler(SampleMediaElement_MediaOpened);
SampleMediaElement.MediaEnded += new RoutedEventHandler(SampleMediaElement_MediaEnded);
SampleMediaElement.MediaFailed += new EventHandler(SampleMediaElement_MediaFailed);
SampleMediaElement.CurrentStateChanged += new RoutedEventHandler(SampleMediaElement_CurrentStateChanged);
}
void SampleMediaElement_MediaOpened(object sender, RoutedEventArgs e)
{
//Gets fired when the media file gets opened in the MediaElement
}
void SampleMediaElement_MediaFailed(object sender, ExceptionRoutedEventArgs e)
{
//Perform the failure handling
}
void SampleMediaElement_MediaEnded(object sender, RoutedEventArgs e)
{
//Implement the code to hadle the scenario when the media playing has ended
}
void SampleMediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)
{
//Implement anything specific when the current media element state has changed
}
private void PlayPauseButton_Click(object sender, RoutedEventArgs e)
{
if (SampleMediaElement.CurrentState == MediaElementState.Paused || SampleMediaElement.CurrentState == MediaElementState.Stopped ||
SampleMediaElement.CurrentState == MediaElementState.Closed)
{
SampleMediaElement.Play();
PlayPauseButton.Content = "Pause";
}
else if(SampleMediaElement.CurrentState == MediaElementState.Playing)
{
SampleMediaElement.Pause();
PlayPauseButton.Content = "Play";
}
}
private void StopButton_Click(object sender, RoutedEventArgs e)
{
if (SampleMediaElement.CurrentState == MediaElementState.Paused || SampleMediaElement.CurrentState == MediaElementState.Playing)
{
SampleMediaElement.Stop();
PlayPauseButton.Content = "Play";
}
}
private void MuteButton_Click(object sender, RoutedEventArgs e)
{
if (SampleMediaElement.IsMuted)
{
SampleMediaElement.IsMuted = false;
MuteButton.Content = "Mute";
}
else
{
SampleMediaElement.IsMuted = true;
MuteButton.Content = "UnMute";
}
}
}
}
The MediaElement exposes the methods Play, Pause and Stop which can be called from the codebehind which gives good control over the media for the developer.
Run the application and see the basic media player working. Fig 1.1 shows a sample screenshot.
Fig 1.1
Conclusion
Thus Silverlight provides a good support for multimedia. Through this article I hope you have learned about the MediaElement control and how to build a simple media player using it. Please make use of the comments section below to provide your feedback.
Happy reading!
| 