Mini Guide: HTML 5 For Video Producers
Question: I’m hearing so much about HTML 5 since Vimeo and Youtube are now using it for video delivery on their platform. As video producer’s what should we know about HTML 5 and what is the big deal?
Answer: HTML 5 is code. If you’re a webmaster or web designer you’re likely familiar with HTML, right? Right click to view the source for any webpage and you see HTML. Well, this is a new language - an updated version of that older HTML code.
We’re all familiar with the old video embed codes. With HTML 5 that embed code has changed to this: <video> that’s it .
HTML 5 allows you to play a movie in your website without a plugin or player - it’s basically a replacement for a Flash player! There are no long embed codes, the video can play in almost any browser (even when a user has an iPhone- flash video cannot be seen on the iPhone) and patents are not violated when using H.264.
HTML5’s support for audio and video promises to be a more efficient way to watch movies on your computer or smart phone through your browser rather than the restrictive Flash player. This is a player that plays back the Ogg video format.
What does this mean for you…the content producer?
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 , 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.
Benefits of HTML 5
1. 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 in your browser that already supports the format perfectly.
2. 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.
3. Doesn’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 element into the page is just going about it the wrong way.
4. 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.
5. 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.
6. iPhone users can view your videos from your webpages - finally!
Encoding the Videos
HTML 5 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 640×480, does not support streaming, and does not support the Main H.264 profile.
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 , the first frame of the video is shown until the user clicks play, giving the users an idea of the content beforehand.
This article explains the background technical information and extensive instructions on how to encode compatible OGG files.
DrawBacks
1. Limited 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.
2. Videos with captions, annotations, or ads will still be rendered by the Flash player.
3. Fullscreen mode isn’t supported and video can only be played back in the Firefox, Safari and Opera browser. YouTube’s experiment will only work with Safari 4, Chrome, and Internet Explorer via ChromeFrame.
4. 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).
Question and Answers:
How does it play back and what happens if the user’s browser is not supported?
The HTML5 element offers native playback in Firefox 3.5, Safari 3 & 4, Google Chrome and an increasing number of other browsers.
There are 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 , it falls back to QuickTime.
(which allows playback on the iPhone)
If QuickTime is not installed, Adobe Flash is used: You can host locally or embed any Flash file, such as a YouTube video.
Finally, if all else fails, the placeholder image is shown and the user can download the video using the links provided.
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.
Isn’t this 4× as much effort than just using Flash?
4 different video encodes is not required! 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 , 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 and it’d play in any browser.
That’s not the case though. This 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. HTML 5 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 to IE and it should (unless they manage to do even that wrong) ‘just work’ with HTML 5, 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 / 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: HTML 5 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.
This answer was provided by kroccamen@gmail.com at camendesign.com
Comments or additional questions?
Leave your response here