MarkerReached Event

  • Article

Occurs when a timeline marker is encountered during media playback.

XAML
<object MarkerReached="eventhandlerFunction" .../>
Scripting
[token = ]object.AddEventListener("MarkerReached", eventhandlerFunction)

AddEventListener Parameters

token

integer

A token that is returned from the function, which you can optionally retain as a variable. If you intend to call RemoveEventListener to remove the handler, you will need this token.
eventhandlerFunction

object

The name of your event handler function as it is defined in script. When used as an AddEventListener parameter, quotes around the function name are not required. See Remarks.

Event Handler Parameters

sender

object

The MediaElement that invoked the event.
markerEventArgs

object

markerEventArgs.Marker gets the TimelineMarker that triggered this event.

Remarks

You can also add handlers in script using a quoted string for the event handler name:

object.AddEventListener("MarkerReached", "eventhandlerFunction")

This syntax also returns a token; however, the token is not an absolute requirement for removing the handler, in cases where the handler was added by using a quoted string. For details, see RemoveEventListener.

This event is not raised when the MediaElement seeks past a timeline marker.

This event is raised whenever a marker associated with the media is reached. The marker might come from one of three locations:

  • A marker that is stored in the metadata of the currently opened media.
  • A marker that is associated with the currently opened media and comes from a separate stream.
  • A marker that was explicitly added to the Markers collection for the currently opened media, using script.

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;
  
}

Applies To

MediaElement

See Also

Silverlight Events
Media Overview
TimelineMarker