html5 电子白板 直播,HTML5VideoOverlays

HTML5VideoOverlays

Last Revision:Version 1.1, 2010-06-23

Added a fullscreen button, which is shown if the browser supports triggering fullscreen mode programmatically for HTML5 .

Build Requirements:Safari 5.0 or later, or Safari on iPhone OS 3.2 or later

Runtime Requirements:Safari 5.0 or later, or Safari on iPhone OS 3.2 or later

Important: This document is no longer being updated. For the latest information about Apple SDKs, visit the

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.

Copyright © 2010 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2010-06-23