Mac OS X Reference Library Apple Developer Connection spyglass button

Version: 1.1

Posted: 2008-08-06

Build Requirements: Safari 3.1 and later

Runtime Requirements: Safari 3.1 and later

View Source Code:

Download Sample Code (“HTML_video_with_CSS_effects.zip”, 3.21M)


Description

This sample uses HTML 5 and CSS to emulate a stack of iPod nanos. A video is played in each nano using the HTML 5 <video> element. JavaScript is used to play, pause, and seek when the corresponding button on the nano is clicked, and to cross-fade the volume when a nano is brought forward from the stack. All animations on the nanos are done using CSS transitions.

Document Revision History

Date Notes
2008-08-06- Added keywords - Added "Safari" to Dev Centers and Locations - Modified title and description to include information about custom controls - Added a ReadMe file - Changed minimum requirements from 10.5 to Safari 3.1 (which is also available on Tiger) No changes were made to the code in this sample.
2008-06-02Demonstrates use of the HTML 5 video element, media playback control through JavaScript, and CSS transitions.
Did this document help you? Yes It's good, but... Not helpful...