MediaTimeline is a Timeline object which provides control over media timing in the same way that animation timeline objects control animations. For example, a MediaTimeline has associated Duration and BeginTime properties can be used to specify when media begins and how long it plays. See Animation Overview for more information on animation timelines.

There are two ways to associate a Timeline to a MediaElement using a MediaTimeline.

By explicitly creating a MediaClock from a MediaTimeline and assigning it to a MediaElement.

If the Duration of the MediaTimeline is set to Automatic (default), the duration of MediaTimeline is the natural duration of the media source. To find the natural duration of the media source programmatically, query the NaturalDuration property of the MediaElement.

This example shows how to control a MediaElement by using a MediaTimeline in a Storyboard.

When you use a MediaTimeline in a Storyboard to control the timing of a MediaElement, the functionality is identical to the functionality of other Timeline objects, such as animations. For example, a MediaTimeline uses Timeline properties like the BeginTime property to specify when to start a MediaElement (start media playback). It also uses the Duration property to specify how long the MediaElement is active (duration of media playback). For more information about using Timeline objects with a Storyboard, see Animating with Storyboards Overview.

This example shows how to create a simple media player that uses a MediaTimeline to control playback. The media player includes play, pause, resume, and stop buttons. The player also has a Slider control that acts as a progress bar.

The following example creates the user interface (UI) for the media player.

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="SDKSample.MediaTimelineExample"><StackPanelBackground="Black"><MediaElementName="myMediaElement"MediaOpened="Element_MediaOpened"Width="260"Height="150"Stretch="Fill"/><!-- Button controls for play, pause, resume, and stop. --><StackPanelHorizontalAlignment="Center"Width="260"Orientation="Horizontal"><ImageName="PlayButton"Source="images\UI_play.gif"Margin="30,10,10,10"/><ImageName="PauseButton"Source="images\UI_pause.gif"Margin="10"/><ImageName="ResumeButton"Source="images\UI_resume.gif"Margin="10"/><ImageName="StopButton"Source="images\UI_stop.gif"Margin="10"/></StackPanel><!-- Ths slider shows the progress of the media. --><SliderName="timelineSlider"Margin="5"Width="250"HorizontalAlignment="Center"/><StackPanel.Triggers><EventTriggerRoutedEvent="Image.MouseDown"SourceName="PlayButton"><EventTrigger.Actions><BeginStoryboardName="myBegin"><StoryboardSlipBehavior="Slip"><!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.
For example, although the video clip (numbers.wmv) lasts longer, playback ends after six
seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). --><MediaTimelineSource="media\numbers.wmv"Storyboard.TargetName="myMediaElement"BeginTime="0:0:0"Duration="0:0:6"CurrentTimeInvalidated="MediaTimeChanged"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><!-- These triggers impliment the functionality of the Pause, Resume
and Stop buttons.--><EventTriggerRoutedEvent="Image.MouseDown"SourceName="PauseButton"><EventTrigger.Actions><PauseStoryboardBeginStoryboardName="myBegin"/></EventTrigger.Actions></EventTrigger><EventTriggerRoutedEvent="Image.MouseDown"SourceName="ResumeButton"><EventTrigger.Actions><ResumeStoryboardBeginStoryboardName="myBegin"/></EventTrigger.Actions></EventTrigger><EventTriggerRoutedEvent="Image.MouseDown"SourceName="StopButton"><EventTrigger.Actions><StopStoryboardBeginStoryboardName="myBegin"/></EventTrigger.Actions></EventTrigger></StackPanel.Triggers></StackPanel></Page>

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="SDKSample.MediaTimelineExample"><StackPanelBackground="Black"><MediaElementName="myMediaElement"MediaOpened="Element_MediaOpened"Width="260"Height="150"Stretch="Fill"/><!-- Button controls for play, pause, resume, and stop. --><StackPanelHorizontalAlignment="Center"Width="260"Orientation="Horizontal"><ImageName="PlayButton"Source="images\UI_play.gif"Margin="30,10,10,10"/><ImageName="PauseButton"Source="images\UI_pause.gif"Margin="10"/><ImageName="ResumeButton"Source="images\UI_resume.gif"Margin="10"/><ImageName="StopButton"Source="images\UI_stop.gif"Margin="10"/></StackPanel><!-- Ths slider shows the progress of the media. --><SliderName="timelineSlider"Margin="5"Width="250"HorizontalAlignment="Center"/><StackPanel.Triggers><EventTriggerRoutedEvent="Image.MouseDown"SourceName="PlayButton"><EventTrigger.Actions><BeginStoryboardName="myBegin"><StoryboardSlipBehavior="Slip"><!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.
For example, although the video clip (numbers.wmv) lasts longer, playback ends after six
seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). --><MediaTimelineSource="media\numbers.wmv"Storyboard.TargetName="myMediaElement"BeginTime="0:0:0"Duration="0:0:6"CurrentTimeInvalidated="MediaTimeChanged"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><!-- These triggers impliment the functionality of the Pause, Resume
and Stop buttons.--><EventTriggerRoutedEvent="Image.MouseDown"SourceName="PauseButton"><EventTrigger.Actions><PauseStoryboardBeginStoryboardName="myBegin"/></EventTrigger.Actions></EventTrigger><EventTriggerRoutedEvent="Image.MouseDown"SourceName="ResumeButton"><EventTrigger.Actions><ResumeStoryboardBeginStoryboardName="myBegin"/></EventTrigger.Actions></EventTrigger><EventTriggerRoutedEvent="Image.MouseDown"SourceName="StopButton"><EventTrigger.Actions><StopStoryboardBeginStoryboardName="myBegin"/></EventTrigger.Actions></EventTrigger></StackPanel.Triggers></StackPanel></Page>