Share via

  • Article

TimelineMarker

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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

<TimelineMarker   .../>

Managed Equivalent

TimelineMarker

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 their 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 relevant only for a CreateFromXaml scenario. The parser allows the population of the initial .Markers collection of a MediaElement with one or more TimelineMarker elements in XAML. 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 available only once the media (and its internal markers) are loaded at run time. Whenever a Source is loaded, any preexisting .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 the CreateFromXaml method to add a new marker.

For more information on basic concepts, see Audio and Video Overview. Note that the Audio and Video Overview topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

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.

<Canvas 
   xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
   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>

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)
{s

  sender.findName("timeTextBlock").Text =
  markerEventArgs.marker.time.seconds.toString(); 
  
  sender.findName("typeTextBlock").Text = 
       markerEventArgs.marker.type;  
  
  sender.findName("valueTextBlock").Text = 
       markerEventArgs.marker.text;
  
}

See Also

Reference

MediaElement