CODEWITHSUNDEEP
internet-explorer-8ffmpeghtml5-video
forthrin
forthrin

Reputation: 2777

How to do HTML 5 video with Flash-free fallback for IE 8

I need a simple and clean Flash-free, cross-browser solution for embedding video in a Web page. I came up with the solution below, and wish to hear if someone can improve it even further, including:

  1. Can the <object> method show a still image while buffering the video?
  2. Can someone verify those conditional comments? downlevel-hidden and downlevel-revealed got me a bit confused :)

Video converting 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 fallback to 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]-->

Upvotes: 4

Views: 11042

Answers (1)

brianchirls
brianchirls

Reputation: 7853

I suggest putting the <object> tag inside the <video> tag, after the sources. Older browsers (e.g IE < 9, Firefox < 3.6) that don't support the video tag will ignore it and display what's inside it, and new browsers that do support video will ignore any inner content (except the sources, of course).

You can do better still by putting fallback content inside the <object> tag for old browsers on systems that don't have Quicktime installed. Typically, this would be a poster image and a suggestion to upgrade the browser or a link to download the video file.

Have a look at Video for Everybody for a more complete description of how this works and examples. Just replace the Flash object with your Quicktime object. (I suppose, if you wanted to be really thorough, you could put a Flash object inside the Quicktime object so old browsers on machines that don't have Quicktime installed might fall back to Flash if they have it. But that's probably a very small number of people and is likely overkill.)

Upvotes: 4

Related Questions