ConcertDemo

This sample builds a video controller using CSS3 and HTML 5 — specifically, the HTML 5 <video> element, the HTMLMediaElement DOM interface, and CSS3 Transitions and Transforms. JavaScript is used to pause, play, mute, control volume, seek through content in real time, and monitor the amount of video data that has been loaded. CSS3 is used to hide and show the playback controls.

This sample illustrates several core media programming design patterns and general best practices for the Web. For instance, all aspects of presentation are handled by CSS, scripts are free of assumptions about CSS metrics or appearance, CSS classes reflect the UI state, and DOM events are used to trigger updates to playback state in the user interface.