Silverlight 2 – Media Player with Marker support
June 21, 2008 @ 10:10 am in Microsoft, Silverlight
Please note: This sample was made into a Code Plex project and is maintained there. Please download all source from http://www.codeplex.com/sl2videoplayer/
Back in April I created a very simple Video Player in Silverlight 2 Beta 1 which Tim Heuer took to a whole new level. In his first pass he added dynamic resizing and initParams to load the video source. Then back a few weeks ago Tim brought it up to speed for Beta 2 and integrated the "VisualStateManager" to get the ToggleButton to function correctly. I love how it turned out.
One thing that I really wanted to include in my first version was control for TimelineMarkers. Unfortunately in Beta 1 I had some issues with dynamic markers, and decided to hold off until Beta 2 was released. Microsoft Expression Encoder 2 is a great tool and makes it very easy to insert markers that fire events during video playback. Markers are very simple, they define a TimeSpan of when to fire the "MarkerReached" event, and define some text that describes the marker. In my example I will use this text as the copy for my Marker Popup. Here is how I chose to visualize my markers in the video player.
To achieve this effect, I created a custom UserControl called "Marker.xaml". This control contains a single animation which will fade in the text, and fade it out again after a predefined amount of time. The control is comprised of a TextBlock and a “Arrow” path that can be moved left and right within the second row of a Grid control. This gives me the ability to control where the Arrow visualizes in relation to my Timeline Slider control.
Based on the number of markers encoded in the video an equal number of markers will be placed in the “MediaControl”. There position on the slider time line is determined by calculating the following:
The position is not absolute, but close enough to where the “Thumb” in the slider control will exist at that moment the marker should popup. Once I have placed a marker into the appropriate Grid on my MediaControl I store it in a generic Dictionary keyed off of the time it should be displayed. This allows me to very quickly find the UserControl when the Media.MarkerReached event fires or the player goes into fullscreen mode. In the event that the user wants to play the video in fullscreen, I must reposition my markers relative to the new ActualWidth of the sliderTimeline.
Here is how it all turned out.
Code: Code Plex
/p>
Tagged as code, MediaElement, Silverlight, Slider, Tim Heuer, TimeLineMarker, Video Player
June 24th, 2008 at 11:59 pm
[...] has since gone back into the project and implemented media marker support and an enhanced user interface to display them. I found one issue in his marker implementation [...]
July 3rd, 2008 at 2:30 am
[...] Silverlight 2 – Media Player with Marker support Back in April I created a very simple Video Player in Silverlight 2 Beta 1 which Tim Heuer took to a whole new level. In his first pass he added dynamic resizing and initParams to load the video source. Then back a few weeks ago Tim … [...]
July 3rd, 2008 at 11:21 am
Thank you for sharing this. When I download the code and launch the default.html from the PrecompiledWeb directory, the video player loads but clicking on the play button yields no results (black screen). I also see the progress bar on the top for a split second until it disappears. Any advice or pointers? Thanks again!
August 13th, 2008 at 1:16 am
If you start playing and drag the slider a bit forword and then backword for a few times the player stops playing forever. I have seen this issue in all the SL player and posted in the forum. Any solution anyone?
August 13th, 2008 at 6:41 pm
I have seen this I will confirm that it has been added as an issue to the Private Silverlight forms. Thanks for the comment.
August 14th, 2008 at 3:09 pm
This is much worse than I thought. Silverlight is a piece of crap.
August 15th, 2008 at 1:01 pm
[...] Silverlight com a capacidade de inserir texto ao longo da timeline! melhor ainda, opensource: » Silverlight 2 – Media Player with Marker support Posted: Friday, August 15, 2008 6:01 PM by rene Filed under: video, tutorial, opensource, [...]
October 14th, 2008 at 12:05 am
Hey, silverlight is not a piece of crap, its just new. I built a amazing mp3 player with it and it works fine. Silverlight rocks, fraudulent code is a piece of crap. Once my other computer starts working again (that has my mp3 player on it) I will try and modify it for video to show you that silverlight can rock. It has alot of potential. Flash with a prebuilt database, and a language (languages) more capable at ai and processing than actionscript? I think this is version 2.0 and yeah like Ruby on Rails or any other new piece of tech some times it will go bang in our hands, but just because of that it does not mean it is crap, it just means the guy who wrote this code needs to to ADD A FREAKING XAP NEXT TIME. IT IS NOT COMPILING AND YOU ARE MAKING SILVERLIGHT LOOK BAD.
October 14th, 2008 at 12:06 am
oh it is compiling, its just not working even after compilation. I just wanted to add that.
October 14th, 2008 at 11:54 am
A while back this sample was moved to CodePlex. The latest versions can be downloaded from that site.