^{3:28pm • 2009} Nov 20

c share + remix

Video for Everybody!

What?
Why?
The Code
1. Encoding the Videos
Drawbacks
Frequently Asked Questions
Please Contribute
1. Related Projects

Update: Version 0.3.
What’s new?

Simpler Syntax
Download links outside of fallback
(makes no sense otherwise)
Working reliably on iPhone OS 3.0+ now

Hosting for the video generously provided by Chris Double of TinyVid.tv

Download Video: High Quality “MP4” • Low Quality “OGG”

What?

Video for Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element which offers native playback in Firefox 3.5, Safari 3 & 4, Google Chrome and an increasing number of other browsers:

Screenshot of Firefox 3.5 playing video using HTML5

This is native OGG video playback in Firefox 3.5 (you get H.264 playback in Safari). No plugins to install. The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.

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

Screenshot of Internet Explorer 8 playing video using Apple QuickTime

(which allows playback on the iPhone)

Two screenshots of an iPhone (OS v2) 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.

Screenshot of Internet Explorer 8 playing video using Adobe Flash

Finally, if all else fails, the placeholder image is shown and the user can download the video using the links provided.

Screenshot of Firefox 3 without QuickTime or Flash installed, displaying a fall back message about the video

This is all done without JavaScript and requires only two video encodes, one OGG file for Firefox 3.5, and one MP4 file for everything else (Flash / Safari / iPhone). 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.

Why?

Assumptions:

The market is made up of more OSes, browsers and processor architectures than it was five years ago. More people (especially geeks) are browsing with AdBlock / NoScript / FlashBlock than ever before. We can no longer just assume people are going to have Flash and are allowing you to use it.

The same rules apply to video. If my platform / device / browser of choice cannot see your video, or you do not offer me the means to download the video to view offline, then I don’t see whatever it is you’ve got to show me.

I therefore want to help all web-developers get to grips with <video>, to make it easy for them to show video content without having to sacrifice legacy browsers, nor ask you to install anything just to do so.

Starting Off on the Wrong Foot:

I see a problem with how people are beginning to offer HTML5 video. Whilst it is fantastic that DailyMotion and YouTube are experimenting with HTML5 there are a number of primary things content providers must satisfy for HTML5 video to adhere to the openness it is purposed for.

Not treated like a special case: No special page you have to visit. No extra effort should be required on your part to get video your browser already supports perfectly.
No browser sniffing: Implementations could turn up anywhere, in any form. OGG is open-source open-specification. Serving to only mainstream browsers like Firefox 3.5 goes against the whole point of open-video removing the requirement to be tied to one particular vendor.
Don’t require JavaScript: Developers generally don’t know how to include the video tag whilst falling back to alternatives. Trying to detect browsers using JavaScript and writing the <video> element into the page is just going about it the wrong way.

Video for Everybody specifically solves these problems.
It:

Allows content producers to provide HTML5 video as an equal citizen: The same code is used for browsers that support <video>, as well as QuickTime and Flash. No special copy of your website has to be setup, no options have to be ticked. Video for Everybody plays the right file for the right level of support the user’s browser provides.
Degrades extremely gracefully, providing multiple levels of fallback: Using Flash only provides you support for platforms where Flash is installed. No Flash: No Video. Video for Everybody will most of the time still play the video even if Flash is not installed. Flash is not supported on the iPhone, the №1 platform for users accessing the ’Web on a mobile.
Is just plain copy & paste HTML: Of course, you can write a server side script to insert it over and over again according to however many videos you have, but the HTML itself does not use JavaScript to insert the video or detect browsers or even provide the fallbacks. You can enhance Video for Everybody with JavaScript (it’s just the template to get you started), but the core selection of which video format plays is completely down to the browser, no JavaScript involved.

The Code

There’s nothing particularly new about this, people have been doing object-fallback for ages now, however this is an attempt at including HTML5 video into the mix, as well as trying to degrade as gracefully as possible with many levels and have very broad browser / device support (including the iPhone). See the test page for a full list.

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).

<!-- “Video For Everybody” v0.3
     =================================================================================================================== -->
<!-- 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>
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox 3.5 native OGG video -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iPhone video -->
	<!-- 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" />
	<!-- fallback to Flash -->
	<object width="640" height="380" 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.0+ bug -->
		<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 -->
<p>Download Video: <a href="__VIDEO__.MP4">High Quality “MP4”</a> | <a href="__VIDEO__.OGV">Low Quality “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 src="__VIDEO__.MP4" type="video/mp4" /><!--[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" />
	<object width="640" height="380" 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">High Quality “MP4”</a> | <a href="__VIDEO__.OGV">Low Quality “OGG”</a></p>

You need to do a number of things to use the code:

Ensure your server is using the correct mime-types. Firefox 3.5 will not play the OGG video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers
```
AddType video/ogg .ogv
AddType video/mp4 .mp4
```
Replace __VIDEO__.MP4 with the path to your video encoded to MP4-H.264
Replace __VIDEO__.OGV with the path to your video encoded to OGG
Replace __POSTER__.JPG with the path to an image you want to act as a title screen to the video, it will be shown before the video plays in Flash, and as a representative image when the video is unable to play
Replace __FLASH__.SWF with the path to the Flash video player you are using. I use JW Player as it can play the same MP4 that is used for everything else, but this could be any Flash resource including YouTube. Sample code for using YouTube can be seen on the Video for Everybody YouTube Test Page

It is absolutely essential that you provide download links outside of the video for two reasons:

You want people to view your video, right? So why would you wrap the video up in Flash, and then don’t bother providing a means to download the video? There seems to be this phobia of allowing people to actually view the video file you want to show them, like they’re going to immediately pirate it on their street corner. Unless you’ve been living in a hole, it is impossible for you to prevent people from downloading your video files, even if you lock them up in Flash and don’t provide the key. There are hundreds of apps and websites to circumvent that. Give people your video files—you want them to see the video anyway and you are fooling yourself if you think that they shouldn’t be allowed to download the video.
There are some instances where people will simply not be able to view the video inside the web-page. Providing users the means to download the video will ensure your message gets through. This is the only way to support the Palm Prē, for example.

Encoding the Videos

Video for Everybody uses an MP4 video file to play in Safari, in Flash and on the iPhone. Therefore the MP4 file must conform to the requirements for these three platforms. Technically Safari can play anything QuickTime can play. Flash can play H.264 and the iPhone is a little more restrictive in that it tops out at 640x480, does not support streaming, and does not support the Main H.264 profile. See Apple’s own instructions for the specifics.

The OGG file is ~~solely for Firefox 3.5 at the moment~~ for Firefox 3.5 and Chrome, but more browsers may use it in the future as OGG is an open standard and can be implemented by any vendor if they choose so. It is not patent-encumbered and therefore a cheaper choice than MP4 which requires licensing.

For best results, I recommend including the poster image as the first frame when you encode the video. In QuickTime and HTML5 <video>, the first frame of the video is shown until the user clicks play, giving the users an idea of the content beforehand. You can see I’ve done this with my video examples.

I am no expert in video encoding and explaining the entire process is beyond the scope of this article, however this article explains the background technical information and extensive instructions on how to encode compatible OGG files.

Drawbacks

Limited `<video>` Controls

You can roll your own controls using any HTML and a bit of JavaScript. HTML5 also has the benefit that it is far more efficient than Flash, HD video in the browser is possible—without requiring a supercomputer.

A native video implementation improves as the browser improves. Upgrades are free. ~~If a browser vendor adds fullscreen playback to their <video> implementation, then you get it for free.~~ Firefox 3.6 has built in fullscreen support, but until then there’s a Firefox extension for it already. It’s early days yet and if people don’t start using <video> then the improvements won’t come as fast. Video for Everybody hopes to spur on the improvement of <video> implementations.

Lastly, a current bug in Firefox 3.5 means that when JavaScript is disabled (NoScript for example) the video controls do not display. The developer of NoScript is aware of this issue and will try to come up with a solution. For now, right-click on the video for the controls, or use autoplay on your videos, or rely on users allowing your site in NoScript (the same as they have to do with Flash).

If It Doesn’t Work, It Doesn’t Work

As a raw bit of HTML, you have the issue that some browsers just don’t do things right no matter what. I’ve worked around as many bugs as possible in the most common browsers, however there are some issues that cannot be solved with HTML alone. For example, on Linux systems without Firefox 3.5, Flash or MPEG-4 codecs, the browser may attempt to play the video using the M-Player plugin which will display a blank, broken video interface (due to not having an MPEG4 decoder) instead of the fallback. Personally, I suspect the adoption of Firefox 3.5 on Linux will be rapid, and many users will already have installed either Flash or the extra codecs. Regardless, this is why it is important to always provide download links below the video.

Without JavaScript Video for Everybody can’t deal with those kinds of situations. This affects only a small number of users, however if you need to target these users you can always add JavaScript to Video for Everybody to detect the problematic browser scenarios and make adjustments accordingly. That’s perfectly fine to do as long the Video for Everybody HTML is included in the source and JavaScript enhancements are done on page-load; that way your JavaScript won’t prevent Video for Everybody working for the other 99% of scenarios.

Frequently Asked Questions

Because new ideas are confusing.

Isn’t this 4× as much effort than just using Flash?

Video for Everybody doesn’t require 4 different video encodes! It uses only two, which supports 4× as many platforms and browsers than Flash alone does as well as reaching almost anybody who doesn’t have Flash installed or can’t install it (iPhone / Some 64-Bit operating systems).

In fact, it ends up being more effort in the long-run using a Flash only method because when a device like the iPhone comes along and it doesn’t have Flash and it becomes very popular, you now have to re-encode FLV files and add browser detection and new code to deal with it. New hand-held devices that are coming out generally don’t support Flash, or only support a tiny sub-set, however they are using ports of Webkit and Gecko that may support HTML5 <video>, and as the mobile smart-phone market increases, HTML5 video will keep up far quicker than Adobe and who they choose to support.

The code is too large / ugly

In an ideal world, all the browser vendors would agree upon one standard and one way of doing things and update their old browsers to match too. Then you could just use just <video src="my_video.ogg" /> and it’d play in any browser.

That’s not the case though. Video for Everybody is a hack, a kludge, a workaround. It is to deal with the fact we still have millstones like IE tied around our necks that just won’t get with the times. Video for Everybody deals with all of these broken browsers so that you don’t have to.

I doubt you hand-type every object tag you use. You just copy and paste a template, or use a server-side function to spit out the code each time. The size of the code is moot therefore and can be compacted to a decent size.

Going forward, in the future as HTML5 becomes standard and common, then the layers in Video for Everybody can be dropped and we can all (hopefully) move to just the video element and be done. That won’t happen unless we start making use of HTML5 now to help drive adoption. Maybe one day even Microsoft will add <video> to IE and it should (unless they manage to do even that wrong) ‘just work’ with Video for Everybody, shedding the Flash layer and automatically moving up to native video.

Are you saying that JavaScript is bad?

No. Video for Everybody is not aimed at bringing down JavaScript or demanding you go back to the stone age. It is a base template that can easily be enhanced using JavaScript, but does not use it itself to provide the fallback mechanisms.

Other HTML5 video embedding methods use JavaScript to detect the browser’s capabilities and insert the appropriate <video> / Flash content, however this has the drawback that JavaScript must be enabled or even supported—Most RSS readers do not execute JavaScript as a security measure. With Video for Everybody, even in environments without JavaScript the user will still either see the video or be able to download it. The more people who see your video, the better for you.

Can I modify it?

Yes! However, just bear this in mind: Video for Everybody is designed to provide video for all browsers within reason; there are a lot of hacks in the code to make the same HTML work across many, many browsers, each tested with and without Flash and QuickTime. That’s a big matrix of testing. If you modify Video for Everybody you might—quite unknowingly—break support for some particular combinations. Please either do what testing you can, or ask me to get involved in helping to test your modifications.

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 compared to Flash and HTML5 video. 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 an a bubble pop-up from said tray icon distracting you. This is simply unacceptable for playing a video.

Amazon did an experiment whereby they added 100 milliseconds to the load time of their page. Sales dropped 1% immediately. Google did a similar test, adding just half a second to the load time. Traffic dropped 20% immediately.

By including Cortado in Video for Everybody I would be effectively putting some customers off from visiting your website, even damaging people’s opinion of your site because it ‘slows their computer down’. Video is used to communicate a message and that needs to be done with the minimal amount of fuss and as much speed as possible. Until ~~Sun~~ Oracle improve Java to the point where it is no longer a visual nuisance and a speed-bump then I would consider it.

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.

Please Contribute

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.

HTML5 video is here now, available on a very wide range of platforms and devices that stretch well beyond what Flash can support. We need to start building the tools and the patterns to support everybody seamlessly. Video for Everybody is my contribution to this larger movement across the ’Web as a helping hand to bridge the gap for developers so that they do not have to be in the position of choosing one (Flash) or the other (<video>), but being able to choose both.

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

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 3.5’s native <video> controls to provide consistency, regardless of technology used. Absolutely stunning work.