Minimum Software Requirement:

  - Safari 5.0 or later on Mac OS X or Windows OR

  - Safari on iPhone OS/iOS 3.2 or later

About this sample:

  This sample uses layered HTML elements, media events, and CSS transitions to optimize the user experience.

  An image and a semi-opaque "Click To Play" button are initially laid over the video.  When the "Click To Play" button is clicked, a progress spinner is shown until the video can be played all the way through.  At this point, CSS transitions are used to fade out the progress spinner and overlay image, as the video is loaded and begins to play. Two buttons appear when the video begins playing - a simple play/pause button, and a button that triggers fullscreen video display. The fullscreen button is only shown in browsers that support programmatically switching to fullscreen mode.

  This sample also uses touch events on iPhone OS/iOS to provide immediate feedback when buttons are touched.

  You can read more about CSS transitions in the Safari CSS Visual Effects Guide: <http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html>

  You can read more about events for HTML5 audio and video elements in the HTMLMediaElement Class Reference at  <http://developer.apple.com/safari/library/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html>

Images and video are provided by NASA without copyright: <http://www.nasa.gov/audience/formedia/features/MP_Photo_Guidelines.html>

The original video can be found here: <http://anon.nasa-global.edgesuite.net/qt.nasa-global/ksc/ksc_051410_sts132_launch_480i.mov>

The original poster image can be found here: <http://www.nasa.gov/images/content/324113main_pad-mm_946-710.jpg>

-------------------------------------------------  

Copyright (C) 2010 Apple Inc. All Rights Reserved.