Jesse Liberty - Silverlight Geek

Building A HyperVideo Player – 1

In a previous posting, I began a fast and furious mini-tutorial on building a hyper-video player. In this segment, I'll demonstrate how to:

• Use Encoder to add markers to a video
• Use Encoder to create a player
• Modify the player Encoder creates using templates
• Have the player respond to each marker as it is encountered

To begin, you'll need a bit of video. I downloaded the 4th segment of the video on Building a Skinnable Custom Control and then cut out the middle to create a very abridged version that runs just over a minute.

I then imported that video into Encoder, and added markers as shown in the earlier blog entry.

Use Encoder to create a player

With the markers in place I turned to creating my player. Again, this is reviewed in the previous blog entry so I won't repeat that here, but now we're ready to actually make the changes.  For today's exercise, this is a process of eliminating those controls that we don't need. We'll start by opening the player in Expression Blend and as with any custom control you may now ask to edit a copy of the template,

You are prompted, as usual to pick a name and to choose whether to put the template into the file or into App.xaml (for the entire application). We'll choose the latter. Once these choices are made you are dropped into the template editor, the view states are revealed as are the parts of the media player.

This allows you to drill down into the player and simply delete those controls we won't need, including the entire set of "miscControls,"

which are conveniently highlighted on the player to indicate which controls you are about to assassinate,

In the same way, I proceeded to eliminate the buttons used for rapid navigation

Once these were deleted the player was simplified and ready for use.

Responding to the Markers

I'd like to tell you that responding to the markers that we added to the video involves a bit of tricky programming, and you're lucky you found my blog because I can show you how to do it right….

Opening the project in Visual Studio reveals otherwise. You'll remember that what we've created is a template for the ExpressionPlayer class that was emitted by Encoder and that is found in ExpressionPlayerClass.cs:

namespace ExpressionMediaPlayer
{
    public class ExpressionPlayer : MediaPlayer

Stripping out the using statements and comments reveals that the class created by Encoder is just a specialization of Media Player. MediaPlayer's source is provided as well. Opening MediaPlayer.cs and scrolling down to the Events region reveals this:

public event TimelineMarkerRoutedEventHandler MarkerReached;

That is the event we want to respond to; it is fired every time the player encounters a marker in the video.

The EventArgs type that we are passed is well documented in the standard Silverlight documentation, which includes among other things sample code that makes our work embarrassingly easy,

public void OnMarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
{
    timeTextBlock.Text = e.Marker.Time.Seconds.ToString();
    typeTextBlock.Text = e.Marker.Type.ToString();
    valueTextBlock.Text = e.Marker.Text.ToString();
}

All we need is a TextBlock to display the values we'll receive when we hit the marker. Open Page.xaml and add two rows to the grid, and a TextBlock in the second row,

  <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
      <RowDefinition
        Height="9*" />
      <RowDefinition
        Height="0.5*" />
    </Grid.RowDefinitions>
    <ExpressionPlayer:ExpressionPlayer
      Margin="0,0,0,0"
      x:Name="myPlayer"
      Style='{StaticResource ExpressionPlayerBlogVersion }'
      Grid.Row='0' />
    <TextBlock
      x:Name='Message'
      Grid.Row='1' />
  </Grid>

You can now implement the event handler in Page.xaml.cs,

public partial class Page : UserControl
{

  public Page( object sender, StartupEventArgs e )
  {
    InitializeComponent();
    myPlayer.OnStartup( sender, e );
    myPlayer.MarkerReached += 
      new TimelineMarkerRoutedEventHandler( myPlayer_MarkerReached );
  }

  void myPlayer_MarkerReached( object sender,
    TimelineMarkerRoutedEventArgs e )
  {
    Message.Text = e.Marker.Text + " at " + e.Marker.Time.Seconds.ToString() +
        " seconds."
  }
}

The result, as we hoped, is that the player shows the video and when it encounters a marker, it shows the name of the marker and the time the marker was hit. The easiest way to test this is to navigate to the output directory you designated in encoder,

and pick up a copy of the the Default.html and the .wmv file output by encoder.  Drop these in the debug directory of the encoder folder

Double click on Default.html and "let 'er rip!"

Note the marker indicated at just below the (cropped) player.  Be careful when you recompile, the default.html in the Encoder project will be over-written.

Previous: HyperVideo: Getting Started       Next: HyperVideo Put To Work