Camen Design

c share + remix

Video for Everybody!

  1. How It Works
  2. The Code
    1. IMPORTANT Notes
  3. Encoding the Videos
    1. Using HD Video
  4. What’s Next?
    1. Video Controls
    2. Common Demands
    3. Related Projects
    4. Acknowledgements

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to QuickTime and Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.

You may also be interested in reading the sister article “The End of Video for Everybody!”.

Hosting of the video generously provided by
André M. Åslund of Vorwärts GmbH.

Download Video: Apple iTunes “MP4” • Open Format “OGG”

How It Works

If your browser supports it, HTML5 video is used. No Flash—no crash.

Screenshot of Firefox 3.5 playing video using HTML5
HTML5 video in Firefox

In other browsers that do not support <video>, it falls back to QuickTime.

Screenshot of Internet Explorer 8 playing video using Apple QuickTime
QuickTime fallback in IE8

(which allows playback on the iPhone OS 2; OS 3 and above use HTML5 video)

Picture of an iPhone playing video

If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video. It’s important to note that the user is not prompted to install QuickTime if they don’t have it. Fallback is instant and automatic.

Screenshot of Internet Explorer 8 playing video using Adobe Flash
Flash fallback in IE8

Finally, if all else fails, a placeholder image is shown and the user can download the video using the links provided. If the user doesn’t have Flash they are not prompted to install it. Users have enough problems with security already without random websites prompting them to install things—and it’s even more annoying for people who don’t want or cannot use Flash anyway. This is one aspect that makes VfE different than any other video embedding method.

Screenshot of Firefox 3 without QuickTime or Flash installed, displaying a fall back message about the video
Final fallback image, you could use a different image that points to the download links

This is all done without JavaScript and requires only two video encodes, one OGG file, and one MP4 file. Instructions on how to convert your videos to these formats with the correct settings are provided further down this article.

It’s compatible with HTML 4, HTML5 (valid markup), XHTML 1 and additionally also works when served as application/xhtml+xml.

For a full browser compatibility list, see the Video for Everybody Test Page.

The Code

Here follows the full source code. It’s very large because it’s fully commented.
You can easily compact this down (one such example follows afterwards).

Do not miss the important notes below or you will be kicking yourself after wasting hours trying to get it to work. 

<!-- "Video For Everybody" v0.3.2
     =================================================================================================================== -->
<!-- first try HTML5 playback. if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<video width="640" height="360" poster="__POSTER__.JPG" controls>
	<!-- you must use `</source>` to avoid a closure bug in Firefox 3 / Camino 2! -->
	<source src="__VIDEO__.OGV" type="video/ogg"><!-- Firefox native OGG video --></source>
	<source src="__VIDEO__.MP4" type="video/mp4"><!-- Safari / iPhone video    --></source>
	<!-- IE only QuickTime embed: IE6 is ignored as it does not support `<object>` in `<object>` so we skip QuickTime
	     and go straight to Flash further down. the line break after the `classid` is required due to a bug in IE -->
	<!--[if gt IE 6]>
	<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
	[endif]-->
	<!-- non-IE QuickTime embed (hidden from IE): the self-closing comment tag allows non-IE browsers to
	     see the HTML whilst being compatible with serving as XML -->
	<!--[if !IE]><!-->
	<object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
	<!--<![endif]-->
	<param name="src" value="__VIDEO__.MP4" />
	<param name="showlogo" value="false" />
	<param name="autoplay" value="false" />
	<!-- fallback to Flash -->
	<object width="640" height="384" type="application/x-shockwave-flash"
		data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<!-- fallback image. download links are below the video. warning: putting anything more than
		     the fallback image in the fallback may trigger an iPhone OS3+ bug where the video will not play -->
		<img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"
		     title="No video playback capabilities, please download the video below"
		/>
	</object><!--[if gt IE 6]><!-->
	</object><!--<![endif]-->
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>

(If you would like your video to automatically start playing, check out the sample code on the test page.)

Here’s a compacted version as an example:
(Technically only one line break is required to deal with an IE bug on line 4) 

<video width="640" height="360" poster="__POSTER__.JPG" controls>
	<source src="__VIDEO__.OGV" type="video/ogg"></source>
	<source src="__VIDEO__.MP4" type="video/mp4"></source><!--[if gt IE 6]>
	<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
	[endif]--><!--[if !IE]><!-->
	<object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
	<!--<![endif]-->
	<param name="src" value="__VIDEO__.MP4" />
	<param name="showlogo" value="false" />
	<param name="autoplay" value="false" />
	<object width="640" height="384" type="application/x-shockwave-flash"
		data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
		<param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"
		     title="No video playback capabilities, please download the video below" />
	</object><!--[if gt IE 6]><!--></object><!--<![endif]-->
</video>
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>

IMPORTANT Notes

Encoding the Videos

Full instructions are beyond the scope of this article, please refer to Mark Pilgrim’s Video on the Web article for an excellent introduction to video formats and encoding instructions.

Using HD Video

If you would like to use a larger video than 640x480, you can use a QuickTime reference movie to auto-select between an iPhone compatible version and the full-size video. In QuickTime Pro use the ‘File » Export for Web…’ option to output a reference movie (you can also use Apple’s MakeRefMovie tool for finer control). You’ll have three files along these lines: “video.mov”, “video-desktop.mp4” (or m4v) and “video-iphone.mp4”. Now replace the two source elements in the code with these three: (substituting the right file paths) 

<source src="video.ogv" type="video/ogg"></source>
<source src="video.mov" type="video/mp4"></source>
<source src="video-desktop.mp4" type="video/mp4"></source>

What happens here is that the browser will try OGG first and if that isn’t supported it will try play the QuickTime reference movie (Safari / iPhone / iPad) which will auto-select between the desktop and iPhone versions of the video automatically. If the MOV format isn’t supported by the browser (Chrome for example), we point to the same MPEG4 video that the QuickTime reference movie uses.

What’s Next?

Video for Everybody is not a complete solution. It is the template for you to get started. Please help test Video for Everybody on a wide range of browsers, plugins and devices.

Please send anything Video for Everybody related to me at kroccamen@gmail.com and consider subscribing to the RSS for updates.

Video Controls

Some may find the collection of different video controls depending on whether HTML5, QuickTime or Flash is used quite ugly and would prefer a common set of controls for branding purposes. For HTML5 you can roll your own controls using any HTML and a bit of JavaScript but Video for Everybody is only the base template for the creative individual to work with.

SublimeVideo is an HTML5 video player with a nice interface, but be aware that it does not yet work without JavaScript and it is not free for commercial use (nor is JWPlayer, but VfE allows you to use any Flash video player you want).

I would like to develop a consistent interface for Video for Everybody but I need the help of somebody who will be able to develop the Flash code. Please get in touch if you would like to help.

Common Demands

Why don’t you do Flash first, then QuickTime?

The code did used to do that but it was twice as long and people moaned and complained and dismissed the whole notion of HTML5 video on the basis of lines of code that less than 0.1% of viewers would actually read.

Internet Explorer 6 does not support <object> within <object> so that meant that I had to use many more IE conditional comments to filter Flash and QuickTime correctly and it made everything very complicated. The code is more manageable this way and QuickTime is less crashy than Flash anyway.

The QuickTime layer is mainly providing support for iPhone OS 2.0 and Opera. Once Opera 10.5 is common and iPhone OS 2.0 has fallen out of common use then the QuickTime layer can be ditched and it’ll be just HTML5 → Flash.

Why don’t you include Silverlight?

  1. I don’t want to help make Silverlight the next Flash

  2. Silverlight is only good for a minority of IE users, and 99% of IE users already have Flash

  3. It would bloat the code, and the goal is to make it smaller over time as we ditch layers
    (QuickTime can go once iPhone OS 2.0 is gone and Opera 10.5 is common)

  4. I have to test in IE6 / IE7 on XP / IE7 on Vista / IE8 on XP / IE8 on Vista and IE8 on Win7, Opera 9/10/10.5 (Mac/PC), Safari (Mac/PC), Chrome (Mac/PC), Camino 1 & 2, iPhone OS 2 & 3 and Firefox 3/3.5/3.6—and where possible all of those same browsers without Flash and QuickTime installed, Flash installed but not QuickTime, QuickTime installed but not Flash and Flash & QuickTime installed. Can you now imagine having to do that all again with/without Silverlight?

Why don’t you include Cortado, a Java applet that can play OGG video?

The user-experience is more important than the underlying technology. The problem with Java is the user-experience. The loading of a Java applet causes a noticeable pause whilst the Java Runtime Environment loads. Even on my powerful Mac, the page loading freezes and the hard disk thrashes for a few seconds. On low powered machines I’ve seen the entire computer lock up for 10 seconds. On Windows you get a tray-icon appear and a bubble pop-up from said tray icon distracting you. This is simply unacceptable for playing a video, not to mention the annoying Java update application that tries to install the Yahoo Toolbar every time. I’m in no way willing to force that user experience on people.

You are of course free to modify Video for Everybody to include Cortado! If it serves your demographic or needs better, by all means do so.

If you’ve modified Video for Everybody to do something else, or have created an HTML5 video related project, please let me know and if it upholds the same principles as VfE, I’ll list it here.

(I will not list projects that cannot play the video in an RSS reader. Using JavaScript to insert <video> defeats the entire purpose.)

Univers Video Plugin
A WordPress plugin that provides you a simple interface for inserting video. It uses Video for Everybody for the base template but steps up to a custom interface if JavaScript is available. The plugin even does server-side encoding. The Flash interface is designed to closely mimic the look of Firefox’s native <video> controls to provide consistency, regardless of technology used. Absolutely stunning work.
Degradable HTML5 audio and video Plugin
Another WordPress plugin. It doesn’t use VfE, but does provide HTML5 video and Flash fallback without JavaScript detection.

Acknowledgements