How to encode video markers for consumption in Silverlight and WPF
Maybe you want a caption to display beside a video at a certain point or for some animation to start once a video has reached an important part. Using a tool such a Microsoft's Expression Encoder
you have the ability to encode time-based markers in your videos. Then developing applications in Silverlight or Windows Presentation Foundation (WPF) to respond to these encoded markers is a breeze.
Encoding markers using Expression Encoder
Expression encoder provides a wealth of functionality for encoding videos. For this tip we are going to focus on marker encoding. When you encode a marker you are simply injecting some metadata at a certain point in your video. Videos can have as many markers encoded into them as you like and there are many scenarios where video markers will come in handy. For instance you might be developing an interactive application where an animated tour guide speaks over your video at certain high points. A simpler scenario would be displaying textual caption information as your video progresses.
Now you don't want to encode any actual data into your video, but instead just markers to alert you when to react. Once a marker is reached then you will make your appropriate service call or database query to get the appropriate data.
You will notice that you have two options for encoding markers; you can either encode timeline markers or script commands. For all intents and purposes these are almost identical as both are time-based markers allowing meta-data to be associated with a single point in a video. Script commands are to be used for WPF applications while timeline markers will be used for Silverlight applications.
Responding to markers using WPF
Responding to encoded markers in WPF is quite simple. Once you have some script commands encoded within you video it's as simple as setting up an event handler. On the WPF MediaElement object you have access to an event call ScriptCommand. When one of your markers is reached any attached script command event handlers will fire giving you access to the meta-data encoded with that script command.
Responding to markers using Silverlight
Responding to encoded markers in Silverlight is also quite simple and not much different from the WPF implementation. Silverlight also provides an event off of the MediaElement object which fires when encoded markers are reached. In Silverlight these are called TimelineMarkers and the raised event is called MarkerReached. Inside of your MarkerReached event handler you will have access to the meta-data encoded for the current marker.
Unlike WPF, Silverlight also provides functionality via the MediaElement object allowing markers to be programmatically added for a video. Imagine a content management system which allows end users to upload videos and add timeline markers and meta-data for those videos. This would be a great enhancement to any public uploaded video experience such as YouTube. Also imagine this in association with citizen journalism applications providing users with even richer options when uploading their own news content.
About the author
Using the techniques described in this tip you will be able to easily encode markers in videos which you then react to in your Silverlight or WPF applications. As a next step it would not be incredibly difficult to enhance the WPF MediaElement object to support the same marker adding functionality as the Silverlight MediaElement.
Steven Porter is a Senior Consultant and Project Manager for Wintellect, a consulting/debugging and training firm founded by industry experts Jeff Prosise, Jeffrey Richter, and John Robbins. He specializes in technologies such as ASP.NET, ASP.NET Ajax, Silverlight, and WPF. Steve is a Microsoft MVP in Client Application Development and a frequent speaker at events such as user groups and code camps on topics ranging from Silverlight and WPF to Windows Communications Foundation.
This was first published in October 2009