MarkerReached

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

Occurs when a timeline marker is encountered during media playback.

<object MarkerReached="eventhandlerFunction"  .../>

[token = ]object.AddEventListener("MarkerReached", eventhandlerFunction)

Arguments

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, quotation marks around the function name are not required. (See the "Remarks" section.)

Event Handler Parameters

sender	object The MediaElement that invoked the event.
markerEventArgs	object markerEventArgs.Marker gets the TimelineMarker that triggered this event.

Managed Equivalent

MarkerReached

Remarks

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

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.

The MarkerReached 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:

• Stored in the metadata of the currently opened media.

• Associated with the currently opened media and coming from a separate stream.

• Explicitly added to the Markers collection for the currently opened media, using script.

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

Reference

TimelineMarker