TimelineMarker Object

  • Article

Represents metadata associated with a specific point in a media file.

XAML
<TimelineMarker .../>
Scripting
To create an object using scripting, see CreateFromXAML.

Properties

Name, Text, Time, Type

Methods

Equals, FindName, GetHost, GetValue, SetValue

Remarks

A timeline marker is metadata associated with a particular point in a media file. These markers are usually created ahead of time and stored in the media file itself. They are typically used to name different scenes in a video or provide scripting cues. By handling the MediaElement object's MarkerReached event or by accessing the MediaElement object's Markers property, you can use timeline markers to trigger actions or enable users to seek to selected positions in the media file.

TimelineMarker objects are used to represent all types of windows media technology timeline markers: markers and script commands (both metadata and separate stream). The following table lists how the Text and Type properties map to its source marker or script command.

TimelineMarker property Windows Media marker Windows Media script command
Text "Name" field "Param" field
Type Always set to Name "Type" field

The XAML syntax for TimelineMarker is mainly only relevant for a CreateFromXaml scenario. Populating the initial .Markers collection of a MediaElement with one or more TimelineMarker in XAML using one or more is permitted by the parser. However, this has no effect because the .Markers collection is specific to a media source rather than to a MediaElement. At the time the markup is specified, the media specified by Source is not yet loaded, and the true .Markers collection is only available once the media (and its internal markers) are loaded at runtime. Whenever a Source is loaded, any pre-existing .Markers collection in the XAML is discarded and replaced by the media's timeline markers. After the media is loaded, you can manipulate the .Markers collection in script, and use CreateFromXaml to add a new marker.

Examples

The following example creates a MediaElement object and responds to its MarkerReached event. Each time a timeline marker is reached, the example displays the timeline marker's Time, Type, and Text values.

XAML 
<Canvas 
   xmlns="https://schemas.microsoft.com/client/2007"
   xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="300" Height="300">
    
  <MediaElement x:Name="media" 
    Canvas.Top="50"
    MediaOpened="onMediaOpened"
    MarkerReached="onMarkerReached" Source="thebutterflyandthebear.wmv"
    Width="300" Height="200" />
    
  
  <Canvas Canvas.Left="10" Canvas.Top="5">
    <TextBlock 
      FontSize="12" Foreground="DarkGray">Time:</TextBlock>
      
    <TextBlock x:Name="timeTextBlock"
      Canvas.Left="40"
      FontSize="12" />
    <TextBlock Canvas.Top="12"
      FontSize="12" Foreground="DarkGray">Type:</TextBlock>
      
    <TextBlock x:Name="typeTextBlock"
      Canvas.Left="40" Canvas.Top="12"
      FontSize="12" />
    <TextBlock 
      Canvas.Top="24"
      FontSize="12" Foreground="DarkGray">Value:</TextBlock>      
    
    <TextBlock x:Name="valueTextBlock"
      Canvas.Left="40" Canvas.Top="24"
      FontSize="12" />
  
  </Canvas>
  <!-- Stops media playback.-->    
  <Canvas MouseLeftButtonDown="media_stop" 
    Canvas.Left="10" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
  </Canvas>
  
  <!-- Pauses media playback. -->
  <Canvas MouseLeftButtonDown="media_pause" 
     Canvas.Left="70" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
  </Canvas>
  
  <!-- Begins media playback. -->
  <Canvas MouseLeftButtonDown="media_begin" 
    Canvas.Left="130" Canvas.Top="265">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="30" Width="55">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
  </Canvas>
     
</Canvas>
JavaScript 
function media_stop(sender, args) {
    sender.findName("media").stop();
}
function media_pause(sender, args) {
    sender.findName("media").pause();
    alert(sender.findName("media").name);
}
function media_begin(sender, args) {
    sender.findName("media").play();
    
}
function onMarkerReached(sender, markerEventArgs)
{
  sender.findName("timeTextBlock").Text =
  	markerEventArgs.marker.time.seconds.toString(); 
  	
  sender.findName("typeTextBlock").Text = 
       markerEventArgs.marker.type;  	
  	
  sender.findName("valueTextBlock").Text = 
       markerEventArgs.marker.text;
  
}

For more information, see the Media Overview.

See Also

Media Overview
MediaElement