How to encode video markers for consumption in Silverlight and WPF

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

    Requires Free Membership to View

    Login

    When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.

    Hannah Smalltree, Editorial Director

    By submitting your registration information to SearchWinDevelopment.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchWinDevelopment.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

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.

Conclusion
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.

About the author
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

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top