Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Online video has seen explosive growth in the last few years. It seems like a new video site appears every week. Silverlight has always had great video support, and version 5 continues the improvements. In this movie, I'll show you how to use the media element to play and control your video streams. For this demonstration, I am using Visual Studio and a project called UsingVideo. Let's start by looking at my MainPage.xaml file. On this page, I have a media element. There it is. To play the media element, I need to supply a source.
I've done that on this line of code here, Source='/travelpodcast.wmv'. That is a file that I've included as a local resources inside this project. Here it is. It's marked as Build Action equal Content. This is not the usual way that you ship video files with an application. For one, each video that you put in your application will increase the size of your XAP file. Second, videos are not compressed when they placed inside the XAP file. The more common practice is to put the video file on the server and then use a URI here for the source.
The media element exposes many methods and properties that are interesting. Let's start by looking at some events. The first event that I want to look at is the MediaFailed event. This event is raised when the media element can't play the requested media. The best thing for me to do is show an error message to my user in that case. In my code behind, I am doing that here. I'm getting the information from the media element through the e.ErrorException.Message. Then I would take this and show that to the user in a TextBlock or ChildWindow.
Media element exposes the Play method, the Stop method, and the Pause method. It will do what you'd expect. Let me show you. I'll press F5 to run the application, click on the Start button. (video playing) Pause. Continue playing from that point. (video playing) Stop, which rewinds it, so the next time I press Start itt will start at the beginning of the media again. (video playing) There is also a Volume slider here.
Let me adjust that up a little bit and play the video again. (video playing) Next, I'll show you how this volume slider is implemented. Returning back to MainPage.xaml and clicking on my media element, I can see that the volume property is being set through a data binding. This states that somewhere on this page is an element called volumeslider, that I want a one-way binding to that volumeslider, and the property on that slider that I'm interested in is the value property. Here's the slider.
I set the slider to have a minimum value of 0 and a maximum value of 1, because that matches the volume range of the media element. I've also specified my own default value or starting value of 0.2. If you don't set this, it uses the default value of 0.5. Next, I want to look at how I get a progress report of the location of the media from the media element. To do that, I have to use a DispatcherTimer. Here, I am creating an instance of the dispatcher timer and then in my MainPage constructer, I am setting the interval to be 200 milliseconds, starting the timer, and then wiring up an EventHandler that fires every 200 milliseconds.
When that fires, I am going to the media element, getting the current position, and showing that in this locationTextBlock. While I am in here, let's talk about these two properties too. The media element exposes two properties related to video frame rate. RenderedFramesPerSecond gives you the number of frames that are rendered per second. The other property, DroppedFramesPerSecond, lets you know how many frames are being dropped per second. Clever use of these properties can tell you about the smoothness of a video. If the DroppedFramesPerSecond value is too high, you can switch to a smaller-dimension video.
I've commented out those two lines and now I'll run the application and see what it looks like. (video playing) This shows the current location in the video. My rendered frames is showing I am around 24 frames per second, and I have good news: I'm not dropping any frames. Let's look at my source again for this media element. Remember this? Currently, the Source property is set to a single video file.
The media element also supports playlists. Here is an example of a playlist, PlaylistTours.asx. I can replace the name of this single file with the name of my PlaylistTours and then it will play all of these video references. You can see that this is just an XML file that contains the playlist title, the video title, the video author, and the link to the actual media. Playlists are a nice features in Silverlight media. In the next movie, you'll see how to control playback speed.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99352 Viewers
56 Video lessons · 112613 Viewers
71 Video lessons · 81430 Viewers
131 Video lessons · 39092 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.