cheating at creating a silverlight media player| Comments
i just put up another podcast video of how to "cheat" at creating a media player for silverlight. have you been looking at some of these media experiences with all their fancy buttons and dvd player-type overlays, etc. but didn't want to take the time to code your own? well, you don't have to :-) (man that sounds like an infomercial)
in this podcast i demonstrate using expression media encoder as a tool that will essentially generate stub code for you. now keep in mind that expression media encoder itself generates some pretty kick arse templates that may perfectly suit you. but perhaps you want a player that has more branding or a mix of certain elements, etc. well, still use expression media encoder for this. let it output the template and then just change the xaml!
after you watch the podcast (subscribe links on the left panel of my web site if you are reading this in a reader), you'll hear me reference certain named elements for key function points of the player code that is generated. i said i'd call them out here and that is what i'm doing :-). these refer to the named elements in the xaml. they could be canvas elements/groups or objects themselves like a rectangle. as long as they are named specifically the code should work. here's a list of the most popular that i've used and the heirarchy of any children objects they should have. the names themselves are in bold, everything else is just description:
- VideoWindow - this is the key element to display the media and must be a MediaElement node. you can add clipping masks, etc. (as i show in the video), but you must have at least one MediaElement with this name
- PlayPauseButton - the grouped canvas of your play and pause buttons. named this way, the logic is already there to handle certain functions if you don't provide additional animations/timelines (like hide/show).
- PlaySymbol - the symbol for the actual play button
- PauseSymbol - the symbol for the actual pause button
- PlayPauseButton_MouseEnter/MouseLeave/MouseDown - i'm only going to put this here once, but it applies to most of the other elements like StopButton and MuteButton, etc. if you have a timeline named these, it will fire, if you don't some default actions will occur.
- StopButton - the symbol for the actual stop button
- Timeline - for displaying the playing progress of the media
- TimeSliderDecoration - the element that shows the full progress
- TimeSlider - the progress growing metere
- TimeThumb - the arrow/object, etc. that shows the point in the progress and the user would drag to adjust the position
- VolumeSlider - the elements making up the volume function
- VolumeThumb - the arrow/object that shows the position of the current volume and the user would drag to adjust
- VolumeUpButton/VolumeDownButton - if you were to use buttons for volume instead of a slider
- MuteButton - self explanatory
- CurrentTimeText - displays the time progress of the media element
- ChapterArea - the area that would display the markers in the media file (dvd-style playback)
- FullScreenArea - the full screen experience root node
there are, of course, more elements to mess with and i'd encourage you to look at one of the more advanced template outputs and start sniffing around to see what you find. the cool thing is that you don't have to have all of them. you'll notice in the podcast that i only put 3 elements on there and there are no errors. the output code handles if an element is there or not for you.
i hope this helps get you started on creating great media experiences with silverlight and expression sooner! if you want the sample player xaml that i used in the podcast, you can download that here.
Please enjoy some of these other recent posts...