Control the playback of media in a Silverlight project
.png "This page applies to Silverlight 1 projects only")
When you add a media file (audio or video) to a Microsoft Silverlight 1.0 project, and then insert it onto the artboard, the file is added in a MediaElement object, and is set to play automatically. This is different than inserting audio or video files into a Windows Presentation Foundation project, which results in a timeline being created in a storyboard. In a Microsoft Silverlight 1.0 project, you cannot control the playback of a video or audio file the same way as you would control an animation storyboard.
Note
You can use Microsoft Expression Encoder 2 to create a media player and skin it using one of many Silverlight 1.0 templates. The media player includes play, pause, and other control buttons already. You can modify copies of the Silverlight 1.0 templates that come with Expression Encoder 2, or you can open your encoded project in Expression Blend 2 to add more visual elements and features.
Use the following procedure to control the playback of a media file in a Silverlight 1.0 project in Expression Blend 2. For more information about controlling media in a Silverlight 1.0 project, see Silverlight Quick.
To control the playback of a media file in a Silverlight 1.0 project
Add a media file to your project. You can use the procedure that is described in Add a media file to a Silverlight 1.0 project.
Rename the media object to reference it from your code-behind file. For example, right-click the media object under Objects and Timeline, select Rename, and then type MyVideo.
If you want to give users an object that they can click to stop and start the media file, add those objects to the artboard now, and rename them. For example, add an ellipse to the artboard and then rename it Pause. For more information, see Add elements to a XAML document in a Silverlight project and Rename an object.
Under Files in the Project panel, double-click the code-behind file for your XAML document. For example, if the XAML document you are editing is named Page.xaml, double-click the Page.xaml.js file. The code-behind file opens inside Expression Blend 2 in a JavaScript editor.
An example line of code to hook up an event handler already exists in your code-behind file and resembles the following:
rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));Add the following line under that line of code:
this.control.content.findName("Pause").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleClickPause));This code adds and event handler method named handleClickPause that will respond to the MouseLeftButtonDown event when the object named Pause is clicked.
Your code-behind file already contains a sample event handler method named handleMouseDown. Notice that at the end of the handleLoad method, a comma (,) appear after the last brace (}), but no comma appears after the last brace for the handleMouseDown method. This is because the handleMouseDown is the last method that is declared. When you add new methods, make sure that a comma occurs after the last brace for each method except the last method.
Add the following event hander method, preferably before the handleMouseDown event:
handleClickPause: function(sender, eventArgs) { sender.findName("MyVideo").pause(); },This method responds to a user clicking the left mouse button inside your Pause object, and pauses media playback.
Press F5 to test your Silverlight 1.0 application. Click your Pause object to see whether the media playback pauses. You can optionally repeat these steps for a Play and Stop button.