It’s advised you subscribe to the RSS to be kept informed of new releases in case you get caught out by new bugs introduced by vendors *cough*Apple*cough*. The version isn’t <1 for no reason.

IMPORTANT Notes

1. Ensure your server is using the correct mime-types. Firefox 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
   AddType video/webm .webm

2. Replace __VIDEO__.MP4 with the path to your video encoded to MP4 (a warning on using H.264) and
   replace __VIDEO__.OGV with the path to your video encoded to Ogg.
   Optionally you could also include a WebM video.

3. 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, and as a representative image when the video is unable to play (Also replace “__TITLE__” for the poster image’s alt text). Not all browsers support the poster attribute, it’s advisable to encode the poster image into the first frame of your video.

   DO NOT INCLUDE THE poster ATTRIBUTE (<video poster="…">) FOR iOS 3.x SUPPORT. There is a major bug with iOS 3 that means that playback will not work on any HTML5 video tag that uses both the poster attribute and <source> elements. This was fixed in iOS 4.0, but of course for now there will still be a large number of OS 3 users. This bug does not affect use of the poster image in the flashvars parameter, which you should retain

4. Replace __FLASH__.SWF with the path to the Flash video player you are using. I use JW Player (download and place ‘player.swf’ in the right place), 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

5. Safari buffers the video automatically even if autobuffer is absent. This has been fixed in WebKit nightlies with a change to the HTML5 spec; the “preload="none"” attribute on the video element prevents autobuffering. A current bug in WebKit causes Safari to perpetually display “loading” until the play button is clicked

6. The iPhone will not autoplay. This is done to save bandwidth which may cost some users, or be limited.
   It is not a bug, it’s a feature

7. HTML5 video on Android is badly broken. Resolution support varies from one handset to the next (often just 480×360), the fallback image usually doesn’t show and the code requires special adjustments. The Android emulator is completely useless as it doesn’t represent any real hardware and does not play HTML5 video. THERE IS NO WAY TO TEST ON ANDROID WITHOUT A PHYSICAL PHONE. BLAME GOOGLE.

   Android 2.3 (Gingerbread) now finally supports the controls attribute, so that VfE can work, but this still leaves all previous Android versions in the lurch. Use MediaElement.js or VideoJS for better Android support.

8. Some web hosts, in trying to save bandwidth, gzip everything by default—including video files! In Firefox and Opera, seeking will not be possible or the video may not play at all if a video file is gzipped. If this is occurring to you please check your server / hosts and disable the gzipping of Ogg and other media files. You can switch off gzipping for video files in your .htaccess file by adding this line:

   SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary

   With thanks to Bas van Bergen for this tip

9. There are some instances where people will simply not be able to view the video inside the web-page (e.g. Opera Mobile / Mini). It is absolutely essential that you provide download links outside of the video to ensure your message gets through

10. A current bug in Firefox means that when JavaScript is disabled (NoScript for example) the video controls do not display. For now, right-click on the video for the controls, use autoplay on your videos or rely on users allowing your site in NoScript

11. The Eolas ‘Click to Activate’ issue affects Flash in Internet Explorer 6 / 7 as the ActiveX controls are not inserted using JavaScript—however Microsoft removed ‘Click to Activate’ in a later update patch. This issue will not affect users who have run Windows Update.

    Please also note that Windows XP originally shipped with Flash v6, and H.264 playback in Flash requires v9 or 10. Depending on what Flash video player you use, this may cause problems if you intend to support users with out of date Flash versions

12. A parsing bug in Camino 2.0 / Firefox 3.0 means that the image element inside the video element will ‘leak’ outside of the video element. This is not visible however unless some kind of background image or colour is applied to that image element. You can stop this by either wrapping the video element in another element or modifying the code from “<source … />” to “<source …></source>”. This works, but will not validate as HTML5

Adding Custom Controls

Since VfE doesn’t come with any JavaScript the HTML5 video will use whatever native interface the browser provides. This is in the best interest of the user because it provides an interface best tailored to that device. For example, the iPhone always plays video fullscreen so that the edges of the video are not cut off in the browser and the user does not have to pan around to get it all in view. The iPad provides finger-friendly sized controls.

Designers however don’t like the inconsistency and would like a unified set of controls. Both MediaElement.js and VideoJS use VfE and custom controls you can style how you please with CSS.

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. As WebM is quite new, here is a quick guide to encoding WebM video.

• There is no restriction on the resolution of the Ogg video

• The iPhone can play MOV and MPEG4 videos with a maximum size of 640×480 and only allows the Base Profile for H.264 (See Apple’s own instructions for the specifics). If your desired video is bigger than that, please read the instructions below for how to adjust the code to use hi-res videos whilst keeping iPhone compatibility

• The iPad can play H.264 up to 720p, 30 FPS

• Firefox will only play Ogg (WebM is also supported in Firefox 4), and it will not degrade to Flash if there is no Firefox-compatible video file

• For best results I recommend including the poster image as the first frame when you encode the video

Using HD Video

If you would like to use a larger video than 640×480, 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="/img/spacer.gif"> 

<source src="/img/spacer.gif">