Double-click the video to go full-screen.
This example uses SoundManager 2 to find and play links to MPEG4 files within an unordered list, and makes them playable "in-place" on a page. The script assigns CSS classes to links' parent LI nodes to indicate their state (playing/paused, etc.)
This provides a nice HTML base for all browsers and user agents, and enhances progressively for those with Javascript and Flash. Links pointing to MPEG4 videos are assigned an onclick handler which intercepts the click (preventing the browser from following the link and unloading the page. SM2 will then create sound objects as needed to play the videos. In the event there is an error at runtime or a lack of support (no JS/Flash etc.), the browser will simply load the video file directly as it normally would. This includes iPhones, etc.
Each item in the playlist has its own set of controls and progress indicators, etc. This content is defined once as a hidden template of HTML in-page separate from the playlist markup and is cloned for each item as needed. This can be easily styled with CSS as well, of course.
Some CPU overhead is incurred from JS updating HTML UI showing load, progress etc vs. playing video alone. Compare with the basic video demo.
Firefox also seems to take up more CPU if the .SWF is nested in a floated multi-column layout, so this demo uses absolute positioning. Positioning the .SWF absolutely from the document root as an overlay may work best for performance.
See the basic example which has a simple template, and code which enables MovieStar mode (ie., video ability) in SoundManager 2.
If you want to also smash christmas lights as in the video, check out Christmas Light Smashfest 2007 with a modern browser for best effect.