# SoundManager 2: "MovieStar" MPEG4/H.264 Video Demo

## MPEG4 / H.264 + HE-AAC (Flash "MovieStar" 9.0r115+) video support - experimental

### A subset of MPEG4 is supported including FLV, MP4, M4A, MOV, MP4V, 3GP and 3G2 files.

- Jellyfish (848x480, H.264)
- Jack Dempsey Cichlids (320x240 .FLV of my fish, from YouTube)
- Smash Christmas Lights! (640x480 H.264)
- Clouds Over Kal Lake (800x600, 2048 kbps H.264 .MOV)
- Rubber Chicken 1 (iPhone-compat. H.264 .M4V, max 900 kbps)
- Rubber Chicken 2 (iPhone-compat. .3GP , max 50 kbps)
- Scratch Practice (DJ Cam) (512 kbps H.264 .MP4, mature language)
- Basil Vs. Caterpillar (816x458, 2048 kbps H.264)
- Clock (1632x916, "HD" .MP4 - CPU fires probable.)
- Cilantro Time Lapse (1600x1200 .MP4, CPU fires almost certain.)
- Granville Island Water Park (MP4+MiniDisc Audio)
- Tesla Coils at Maker Faire (MP4)

%s1 / %s2

## How It Works

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

### Progressive Enhancement

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.

### HTML Fragments (UI Element Templates)

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.

## Performance Observations

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.

## I'd like to use this.

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.