HTML5 Video and fallbacks

readme.md

And don't forget to add the mime types in your webserver (Apache, Nginx, etc...):

• video/mp4 for .mp4: for Internet Explorer 9+ and Safari 5+

• video/ogg for .ogv: for Firefox 3.5+, Opera 10.5+ and Google Chrome +6 (and Internet Explorer 9+ if the codec is installed)

• video/webm for .webm: for Firefox 4+, Opera 10.6+ and Google Chrome 6+ (and Internet Explorer 9+ if the codec is installed)

• application/x-shockwave-flash for .swf: for all browsers with Flash installed

You can use Miro Video Converter to generate all versions of the video and Flashdevelop to make a Flash movie.

embed.html

<video width="400" height="300" controls="controls" poster="video.jpg"> 
	
	<!-- video format depending on what the browser supports -->
	<source src="video.mp4" type="video/mp4" />
	<source src="video.webm" type="video/webm" />
	<source src="video.ogv" type="video/ogg" />

	<!-- flash fallback if the browser doesn't support HTML5 -->
	<object type="application/x-shockwave-flash" width="400" height="300" data="video.swf"> 
		<param name="movie" value="video.swf" /> 
		<param name="wmode" value="transparent" /> 
		<!--[if lte IE 6 ]>
		<embed src="video.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed>
		<![endif]--> 
		
		<!-- ultimate fallback when there is no HTML5 video support and no Flash support -->
		<img src="video.jpg" width="400" height="300" />
	</object> 
</video> 

If you plan to support iOS users (iPhone / iPad), your HTML5 video must have controls enabled because Apple forbids autoplaying videos, even using a script; there used to be hacks until iOS 4.2, but they are no longer usable.