Different possibilities of HTML5 video embedding

Demos

1. Default demo (using only <video> tag)
2. Static demo (works with swfobject and NonverBlaster:hover)
3. Static demo without Controls (works with swfobject and NonverBlaster:hover)
4. Dynamic demo (works with swfobject and NonverBlaster:hover)
5. jQuery demo (works with jQuery, jQuery SWFObject Plugin and NonverBlaster:hover)
6. MediaElement demo (works with jQuery and MediaElement.js, own player)
7. MediaElement MooTools demo (works with jQuery and MediaElement.js, own player, no conflict with MooTools)
8. Minimal demo (works with swfobject and NonverBlaster:hover)
9. Single video demo (works with jQuery,swfobject and NonverBlaster:hover)

Comment

Converted with Adobe Media Encoder for Flash ( f4v) and iPhone (mp4)
and MiroVideo Converter for html5 (ogv, webm).
Mp4 converted with QTIndexSwapper for progressive download with flash.

Browser support overview

http://en.wikipedia.org/wiki/HTML5_video#Table

Used Links

• A Collection of 20 HTML5 Video Players
• code · Video for Everybody!
• Einführung: Videos einbinden mit HTML 5 | www.video-flash.de
• HTML5 - Video: Richtige Einbindung
• jQuery SWFObject
• MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims
• Miro Video Converter FREE - Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.
• Using jQuery and MooTools Together
• Video For Everybody Generator
• jQuery: The Write Less, Do More, JavaScript Library
• swfobject - SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file - Google Project Hosting
• @renaun posts: QTIndexSwapper
• John Dyer | Simple Cross-Browser HTML5 video with a single H.264 file and fallback options

Screenshots of standard players in supported Browsers

Safari 4

Opera 11

Google Chrome 11

Firefox 3.6

Internet Explorer 9

IPhone (Safari), click opens video in player.

 

dropdesign 2011.05.06