The MediaElement control is a rectangular control that can contain audio or video as its content. Silverlight supports many codes for audio and video and a full list of supported codecs can be found on the MSDN website—http://msdn.microsoft.com/en-us/library/cc189080%28v=vs.95%29.aspx.

Using the MediaElement control is quite straightforward. Create a new Silverlight project in Visual Studio and name it Chapter2-Media. Copy a video file to your web project ClientBin directory (you can find a few in Windows 7 operating system's Sample Videos folder), and copy the following line of code to your MainPage.xaml file:

<MediaElement x:Name="MyFirstMediaElement" Source="Wildlife.wmv" />

That's it! Build and run the application, and you should see that the movie starts playing in your browser.

Controlling the MediaElement control is done in code behind using a couple of methods. To demonstrate this, wrap the newly added MediaElement in StackPanel, and add two buttons below it—Play and Stop. Your code should look something similar to the following code snippet:

<StackPanel>
<MediaElement x:Name="MyFirstMediaElement" Source="Wildlife.wmv" />
<Button Content="Play" Width="100" x:Name="playBtn" Click="playBtn_Click"/>
<Button Content="Stop" Width="100" x:Name="stopBtn" Click="stopBtn_Click"/>
</StackPanel>

Switch over to the MainPage.xaml.cs file and add the missing playBtn_Click and stopBtn_Click methods:

private void playBtn_Click(object sender, RoutedEventArgs e)
{
MyFirstMediaElement.Play();
}
private void stopBtn_Click(object sender, RoutedEventArgs e)
{
MyFirstMediaElement.Stop();
}

Build and run the application. You can now control the media playing using the two new buttons.

The MediaElement control exposes a few handy properties as well. AutoPlay is a Boolean property that sets whether the current media should be automatically played when the control is loaded or not. CanPause is used to determine whether or not a user can pause the playing media and CurrentState returns the current state of the playing media.

Other than these properties the MediaElement control offers us the properties to know its current location and the total length of the movie. NaturalDuration returns a Duration element, which states the total length of the playing media. Using the Position property, you can read the current position of the playing media, and if CanSeek is set to True, you can also set the position programatically. CanSeek is a read-only property and it is set when the media is loaded to the MediaElement control. If you are playing a streamed media (from a streaming service for example), then CanSeek will be set to False, otherwise it is set to True.

The MediaElement control is fun, and it's a simple control, and you are encouraged to play a bit more with it and read about it on the MSDN website—http://msdn.microsoft.com/en-us/library/ms611595%28v=VS.95%29.aspx—before moving on to the next subject.

Integrating Digital Rights Management (DRM) into your Silverlight application allows you to better protect and secure your media content. The most common use for the DRM mechanism is to protect media. Streaming sites that use progressive download (a streaming method in which the media plays as it downloads) or sites that offer the user, downloads of media files for offline watching, usually use DRM to protect their assets from being passed freely from one user to another. DRM is a wide and complicated subject, and as such it is beyond the scope of this book.

If you wish to know more about DRM, you should visit MSDN's documentation on Digital Rights Management (DRM), which explains in detail how the process works and offers a few code samples. MSDN's documentation can be found at http://msdn.microsoft.com/en-us/library/cc838192%28v=vs.95%29.aspx.

The MediaElement control can be used for more than just playing video. This control offers several audio-specific properties that give the user a greater listening experience. AudioStreamCount, AudioStreamIndex, Balance, Volume, and IsMuted are the properties responsible for controlling the audio.

Silverlight supports the concept of "closed captioning" through the use of timelined events. Other than just playing the media, the MediaElement control also enables you to interact with the timeline of the playing media for various uses. These can range from displaying subtitles to showing content-specific advertisements or just about anything else you think is relevant to the currently displayed content. The TimeLineMarker object is the one responsible for this interaction. The Text property of the TimeLineMarker object is a string that represents the value of the object. The Type property is used to specify the marker type of TimeLineMarker, and the Time property accepts a TimeSpan type of value, which represents the position of the marker within the playing media we wish to interact with.

There are two different types of TimeLineMarker. The first type is the Basic type. It's used when you wish to provide fixed information (for example, subtitles). The second type is known as the Script type, and it can be used when you wish to run some code when the marker reaches the time specified in the TimeLineMarker object.

To interact with the timeline, we use code behind and build a collection of the TimeLineMarker objects. Then we add the MarkerReached event to the MediaElement control. This event gets fired whenever one of the TimeLineMarker objects' Time property is reached. Let's add subtitles to our current project. We already have a MediaElement control added that plays a WMV file, so all we have to do is add the MarkerReached event to it. Change your MediaElement control as follows:

<MediaElement x:Name="MyFirstMediaElement" Source="Wildlife.wmv" MarkerReached="MyFirstMediaElement_MarkerReached" />

Because, the collection of markers gets built once the media is loaded, we have to add a call to the MediaOpened event handler. Add it to your MediaElement control so that it looks like the following code snippet:

<MediaElement MediaOpened="MyFirstMediaElement_MediaOpened" x:Name="MyFirstMediaElement" Source="Wildlife.wmv" MarkerReached="MyFirstMediaElement_MarkerReached" />

Don't forget to change the Source property to the name of your video file.

We also need a control to display the subtitles. Add a TextBlock control just below the MediaElement control and name it MySubs:

<TextBlock x:Name="MySubs"/>

Now we need to add some TimeLineMarker objects to the MediaElement control. The only place to add markers to the MediaElement control is the MediaOpened event handler. In your code, add the following MediaOpened method:

private void MyFirstMediaElement_MediaOpened(object sender, RoutedEventArgs e)
{
List<TimelineMarker> markers = GetMarkers();
foreach (TimelineMarker marker in markers)
{
MyFirstMediaElement.Markers.Add(marker);
}
}

The preceding code snippet creates a list of the TimeLineMarker objects from the GetMarkers method. The code for the GetMarkers method can be found in the downloadable source from the Packt website under the Chapter2-Media project directory. Once we have the list of objects, we will need to go over it using the foreach loop and add the marker to the Markers collection of the MediaElement control.

To actually make the subtitle shown on the page, we need to change the MarkerReached event handler. Change the event handler to the following code snippet:

private void MyFirstMediaElement_MarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
{
MySubs.Text = e.Marker.Text;
}

What all the preceding code snippet does is to set the Text property of the previously added TextBlock to the Text property of the reached marker.

Build and run the application, and you should notice that when the movie starts playing, a subtitle is shown as follows:

The subtitle's text is changed when MediaElement reaches the second marker, 4 seconds later.

The MediaElement control is the heart and soul of every media-related project done in Silverlight. It can be extended to subtitles, buttons, and just about anything your imagination thrives to.