Full write-up article here. If you’ve arrived here from a link please note that VfE no longer includes QuickTime as part of the fallback, but the code for that version is still available here.
Hosting of the video generously provided by
André M. Åslund of Vorwärts GmbH.
Download Video: Closed Format: "MP4" Open Format: "OGG" / "WebM"
Video is the first minute from the cc-by licenced “open movie” Big Buck Bunny
To test on Windows, I cycled through using the Flash Installer (IE | Others) and Flash Uninstaller.
Fallback happens from left to right. If HTML5 `<video>` is not supported Flash should display, if Flash is not installed the images should display and the download links should play the video.
Playback Used | Notes | |
---|---|---|
IE9 (Vista/7) | HTML5-MP4 | Even with the WebM plugin installed, IE9 will still default to the MP4 because it has to be listed first in the source list due to an iPad bug |
IE8 (XP/Vista/7) | Flash | |
IE7 (XP/Vista) | Flash | |
IE6 (XP) | Flash | |
Gecko | ||
Firefox 4β | HTML5-WEBM/OGG | |
Firefox 3.6 | HTML5-OGG | |
Firefox 3.5 | HTML5-OGG | Does not support poster image, encode your poster image into the first frame of the video |
Firefox 3 | Flash | |
Firefox 2 | Flash | Prompts to install Flash if it is missing (the only browser to do so) |
Camino 2.1α | HTML5-OGG | |
Camino 1, 2 | Flash | Camino has a built-in Flash blocker, users may have to click the flash object to load it |
WebKit | ||
Chrome 6+ | HTML5-MP4/WEBM/OGG | Chrome 6+ can play WebM, but MP4 has to be listed first due to iPad bug. Native MP4 support is due to be dropped from Chrome |
Chrome 3+ | HTML5-MP4/OGG | |
Safari 3+ (Mac) | HTML5-MP4 | |
Safari 3+ (PC) | HTML5-MP4 → Flash | Requires QuickTime to be installed for `<video> `! |
OmniWeb | HTML5-MP4 | |
iCab | HTML5-MP4 | |
OWB 1.7 MorphOS | HTML5-MP4/OGG | |
iOS |
Please note that both the iPhone and iPad will not autoplay even if you specify it. This is designed to save bandwidth which may be limited or cost for some users. | |
iOS4 | HTML5-MP4 | The bug with the poster attribute has been fixed. |
iPhone OS 3.x | HTML5-MP4 | Warning: Use of the `poster ` attribute causes intermittent playback problems with
iOS3 |
iPhone OS 2 | HTML5-MP4 | With thanks to Greg Kida for testing |
Android | HTML5 video on Android is badly broken. Resolution support varies from one handset to the next (often just 480x360), the fallback image usually doesn’t show and the code requires special adjustments. The Android emulator is completely useless as it doesn’t represent any real hardware and does not play HTML5 video. THERE IS NO WAY TO TEST ON ANDROID WITHOUT A PHYSICAL PHONE. BLAME GOOGLE. | |
2.3 (Gingerbread) | HTML5-MP4 (Varies) |
`controls ` is now supported in 2.3, allowing for VfE to work, as long as the handset in
question supports the video resolution / encoding.
|
2.0+ | MP4 (varies) |
`controls ` is not supported so that the video cannot be played without using JavaScript.
Details on this here,
or use a more comprehensive HTML5 video player like MediaElement.js
|
Other Mobile | ||
Palm WebOS | HTML5-MP4 → MP4 | Some glitching with scrolling. WebOS versions <1.4 show fallback text, download link plays video |
Firefox Mobile | HTML5-OGG | Plays at 1–2 FPS due to no hardware decoder for Ogg. Thanks goes to Nikolay Vladimirov for testing |
Blackberry Bold 9000 | NONE | “Playback Error” ◊ |
Blackberry Curve 8900 | MP4 | Black rectangle in page, but download link works ◊ |
Nokia N96 (Symbian S60) |
HTML5-MP4 | ◊ |
Opera | ||
Opera 10.60+ | HTML5-WEBM/OGG | |
Opera 10.50+ | HTML5-OGG | |
Opera 10.10 | Flash | |
Opera 9.6 | Flash | |
Opera Mobile | MP4 (Varies) | Fallback image shown, video compatibility dependent on handset |
Opera Mini | MP4 (Varies) | Fallback image shown, video compatibility dependent on handset |
For console compatibility (Wii / PS3 / PSP &c.) see the YouTube Test Page.
controlbar
` attribute to `flashvars
` so that the Flash player no
longer needs a different height than the HTML5 video<source>
` tags to fail
whenever the page is refreshed.<source…></source>
` back to `<source… />
` for
valid HTML5.flashvars
` parameter instead of appending to the SWF location for
simplicityautoplay=false
’ param for QuickTime