This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.
The "media element" is an XAML element that lets you embed media -- namely, video and sound -- into Silverlight applications, thereby exposing the functionality in Silverlight that lets you manipulate the media content.
In the example below, we have only added a few new properties. The first new property is the "source property." The source property for the media element is what tells the media element where to go to a particular file or bit of media. The isMuted property is set to True or False, which determines if the element has sound when it first plays. In other words, it turns on/off the mute setting of the media element.
The next property is the AutoPlay. AutoPlay determines if and when the video is first loaded, if the video should automatically start playing. You can see these in this example of a media element in XAML.
Let's take a look at the media element running in Figure 1. Note the size of the video and the left and top properties and how they place the element. The really bad thing about it is, that this particular video is not 100x100 so there are some performance issues with doing it this way. The problem with this is not a function of the fact that we are showing the image at 100x100 but that it was encoded for a different size then 100x100. When you show video at a different size then the size it was encoded for then there is a performance hit for having to transform the video in real time.
Figure 1: Simple media player running.
That is how we build a basic media element and set our source and properties. Silverlight also support streaming media which means that we can basically make a web request (that is, an HTTP request to some URL) for a some video and as we starting getting the packets, we can actually start doing something with the video without waiting for the video to fully download. How we determine when to start playing or how much we need to download is called "buffering". In Silverlight, we can use a number of events to make sure we play nice with our media and stream it if we supported by our server. From the standpoint of "Silverlight," we really don't have to do anything special (Silverlight deals with loading and buffering), but we can overwrite how much of a buffer Silverlight will wait for before firing the media loaded event and start playing. Next we start adding controls to make the video do things. In other words, we start to manipulate the video in our media element.
Media Element Controls: Play, Pause, Stop and Full-Screen
Let's address the basic operation of the media element. The key "methods" are straightforward -- Pause, Play, and Stop. Pause only works if the video is playing. If the video is playing, then when you call the Pause method on the media element the audio or video pauses in its current position. Unlike Pause, Stop actually stops the player and resets the player back to the start of the current media source. Play is the opposite of Pause. If the video is "paused" at some location in the current media source or "stopped" at the beginning -- which is the state it starts with assuming auto play is set to False -- then the play method starts the video or audio playing.
The next cool feature is the full-screen mode of the Silverlight control. Full-screen mode is not a function of the media player, but of the control. You could, of course, use the full-screen feature to do things other than media, but most of the time it wiill involve showing video on full screen. Since the media element doesn't change on its own, you would have to handle the UI change in your code from or/to full screen. Full-screen then is a property of the host Silverlight control and on full screen changed, an event on the top control, we can then change the UI to the state needed.
With these four simple UI elements that you can bind to events using the mouse down events, you can create the behavior needed to build a media player that looks like the simple media player in Figure 2.
Figure 2: Simple media player.
To make this example actually work, let's look at how we set it up, starting at Listing Two where the events are wired up to the button elements.
Notice that in the constructor we programmatically bind an event onfullScreenChanged to a method to manipulate the UI between transitions if we want to. However, in this example we'll skip over that and focus on the methods we call on the media element.
The full-screen mode must be fired from a user event directly and we are not allowed to nest this or have it fired from a non-direct user event. This prevents bad people from taking over someone's screen without permission. Let's review the basic events we wired.
The play, pause, and stop events are a reference to the media element so they are straightforward. The method MediaElementElement_fullscreen is important for the full-screen feature to be used and wired in XAML. As noted earlier, they are user events and can launch the application into full-screen mode. This event actually handles both cases and changes the application state, depending on the current state when the event fires.
In more sophisticated applications, we might be arranging or exposing different controls. Here, we would do that in this method. With our basic controls wired up let us move onto a number of other events we might want to use against the media element to provide more complete interaction with the video.
Currently we allow the following HTML tags in comments:
Single tags
These tags can be used alone and don't need an ending tag.
<br> Defines a single line break
<hr> Defines a horizontal line
Matching tags
These require an ending tag - e.g. <i>italic text</i>
<a> Defines an anchor
<b> Defines bold text
<big> Defines big text
<blockquote> Defines a long quotation
<caption> Defines a table caption
<cite> Defines a citation
<code> Defines computer code text
<em> Defines emphasized text
<fieldset> Defines a border around elements in a form
<h1> This is heading 1
<h2> This is heading 2
<h3> This is heading 3
<h4> This is heading 4
<h5> This is heading 5
<h6> This is heading 6
<i> Defines italic text
<p> Defines a paragraph
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code text
<small> Defines small text
<span> Defines a section in a document
<s> Defines strikethrough text
<strike> Defines strikethrough text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<u> Defines underlined text
Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.
This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!
