Starting and Stopping a Media Element

As you work with Media, you will undoubtedly want to give your user the ability to pause and resume a video clip as they need. In this tutorial, we'll learn how to hook up Play and Pause buttons to a Media Element.

In my sample, I've already added the Video Clip to the project, and added a Play and Pause button. The video was names SampleVideo.wmv, so the timeline created for me got the name SampleVideo_wmv. I've also renamed my buttons "Play" and "Pause" so I can identify them later.

First, let's take a look at what we've already got. Press F5. You'll see that the animation starts immediately, and pressing the Play and Pause buttons do nothing. We need to hook them up.

2. Switch back to Blend, and let's add an Event Trigger to the Play button first. Make sure the Play button is selected, and press the + Event button in the Triggers palette.

When you press the + Event button, a sample Event Trigger is added for you, based on when the Window is Loaded. Change these boxes, so that it displays "When Play Click is raised" as shown.

Now, click the small + symbol just to the right of the word Raised to add an action to the Event trigger. For right now, we'll leave it at the default, which will begin the SampleVideo_wmv timeline.

Now, we need to hook the Pause button up. Select Pause in the timeline, and add another Event Handler. In this case, when the Pause Click is raised, we want the SampleVideo_wmv timeline to be paused. It should look like this:

Press F5 to test the application, and let's look at what we have. First, the animation starts playing as soon as the application starts. The Pause button seems to do what we want, because when we click it, the video pauses, but clicking the Play button again restarts the animation from the beginning.

What's happening here, is that the Window.Loaded event causes the video to Begin. This will always start the animation at the beginning. The Play button is also causing the video to Begin, so it hops back to the beginning. In order to get the animation to start at the point where it was paused, we need to switch the action on the Play.Click event to Resume the animation instead of Begin.

Back in Blend, select Play.Click in the Triggers panel, and change the action to Resume the SampleVideo_wmv animation. It should look like this:

If we simply removed the SampleVideo_wmv Begin action, the video would not have a Begin anywhere. And if the video doesn't begin, it doesn't play. So, instead of deleting the Begin action, we're going to add another action, and tell it to pause. Click the + to the right of the Loaded box, and another action is created. Set this to SampleVideo_wmv Pause.

Now, consider what happens. When the window is loaded, it will Begin the SampleVideo_wmv timeline, then immediately Pause it. To the user, it will look like the video didn't even start, since the two events happened literally on top of each other. Now, they can Resume and Pause the animation however they wish.

Press F5 and observe the behavior. As we expected, the video doesn't start immediately, and when you hit Play, it begins. Now, additionally, the Pause and Play buttons cause the animation to pause and play more like we'd expect.