How to make HTML 5 video without Flash-Free for IE 8

I need a simple and clean free, cross-browser solution for embedding video on a web page. I came up with a solution below and want to hear if anyone can improve it even further, including:

  • Can the <object> method show a still image when buffering a video?
  • Can anyone check out these conditional comments? downlevel-hidden and downlevel-revealed confused me a bit :)

Convert the video as follows (using WMV for IE 8, WEBM for Firefox and H264 for the rest):

 ffmpeg -i video.mov -b 3000k -vcodec wmv2 -acodec wmav2 -ab 320k -g 30 out.wmv ffmpeg -i video.mov -b 3000k -vcodec libvpx -acodec libvorbis -ab 320k -g 30 out.webm 

Markup (using conditional comments to create a backup for IE 8 users):

 <![if (!IE) | (gte IE 9)]> <video controls="true" autoplay="true" poster="video.jpg"> <source src="video.mov" type="video/quicktime"/> <source src="video.webm" type="video/webm"/> </video> <![endif]> <!--[if (IE) & (lt IE 9)]> <object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="1280" height="720"> <param name="filename" value="video.wmv"/> <param name="autostart" value="autostart"/> <param name="showcontrols" value="true"/> <param name="showstatusbar" value="true"/> </object> <![endif]--> 
+4
source share
1 answer

I suggest placing the <object> tag inside the <video> after the sources. Old browsers (e.g. IE <9, Firefox <3.6) that do not support the video tag ignore it and display what's inside it, and new browsers that support video will ignore any internal content (except for sources, of course).

You can do your best by placing backup content inside the <object> for older browsers on systems that do not have Quicktime installed. Typically, this will be a poster image and an offer to update the browser or a link to download a video file.

Watch the Video for All for a more complete description of how this works and examples. Just replace the Flash object with the Quicktime object. (I suppose, if you wanted to be very thorough, you could put the Flash object inside the Quicktime object, so old browsers on machines that don't have Quicktime installed can revert to Flash if they have one. But this is probably very small number of people and probably bust.)

+4
source

All Articles