By Nic Lindh on Monday, 17 January 2011
HTML5 is exciting, to say the least. But the hype has gotten a bit out of control with the less technical crowd.
“Want to put video on the Web? HTML5! It’s right there! Boom!”
Yes, true, there’s a video tag now. Super. So we don’t need plugins or Flash to play media.
Don’t get me wrong, here. This is nice! Love it! But the problem was never that it’s soooooo haaaaard to write some HTML to call in QuickTime or Flash.
Well, it was never the problem for Web developers. For ordinary people who just wanted to put some freaking video on their website it was bizarre. Granted.
Before we get into the nitty-gritty, here’s my recommendation for anybody who wants to publish video: Get a YouTube or Vimeo account (they’re free), upload your video there, then use the embed code to put it on your site. Boom. Done.
This has the glorious benefit of actually working. YouTube and Vimeo have armies of crackerjack engineers who spend all their waking hours figuring out how to make video work on any kind of device with any kind of bandwidth.
But there’s no free lunch. YouTube monetizes by placing ads on videos, including yours. Vimeo doesn’t, but limits how much video you can put up without out ponying up for a plus account.
If you’ve decided that you need to host your videos yourself, read on.
Here’s the video format that works everywhere: There isn’t one.
So you’re either going to use YouTube or Vimeo, or you’ve got some work to do.
See, the video tag, lovely as it is, simply tells a Web browser, “Hey, show this video file here.” Then it’s up to the Web browser to understand how to read that video file. “But surely,” you scoff, “all browsers understand the same video format. Anything else would be madness.”
You are correct. It is madness.
[Here’s the reality](http://en.wikipedia.org/wiki/HTML5_video# Table), courtesy of Wikipedia. Read ’em and weep.
Look at your access logs. Check what kind of browsers your visitors are using. Those are what you have to support.
Which means H.264 for Safari (desktop, iPhone, iPad), WebM or (gag) Ogg Theora for Firefox and Chrome and a Flash-wrapper fallback for Internet Explorer.
It’s important to understand that if you have encoded your videos in H.264 you don’t have to re-encode them for Flash. Flash will happily play the H.264 video. It’s more a matter of creating a Flash video player and then have it play the video. So instead of, like with Safari, have the browser understand and play the H.264 format, Flash comes in and does what the browser could already do. This is why you can watch YouTube videos on an iPhone, a device which does not support Flash in any way, shape or form, but is really good at understanding H.264.)
(Chrome right now supports H.264, but Google in its wisdom has decided to switch to WebM instead. Lots of people are wondering who put something in Google’s drink. CoughAdobeCough.)
So, you’re going to have to compress your videos at least twice. Hope you have a fast computer.
But that’s just the format. (This discussion is grossly oversimplified, believe it or not. There’s not actually a format for video per se: There’s the codec and the container. They are different. But for our purpose here, we’ll just call it format and attempt to hold on to our sanity.) Next you need to worry about your visitors’ bandwidth. The prettier your video, the greater the bitrate. Compress with too high of a bitrate and your visitors will spend forever waiting for the video to play. (Which they won’t—there are plenty of videos on the Internet, honey, no matter how hard you worked on yours.) Compress with too low of a bitrate and your videos will look terrible.
Not to make this a YouTube/Vimeo commercial, but another thing those services do is serve your videos with adaptive bitrates, so they look as good as possible depending on the visitor’s bandwidth.
You can purchase software packages that will allow you to perform the same feat of magic. You will spend a lot of money and time.
To make things even better, you also need to be ready for mobile. An ever-increasing slice of the population will be watching your videos on smartphones while they’re out and about. Are they going to be on 3G speeds or Edge speeds? Or perhaps even on 4G? What size screens do they have?
There’s the fourth video compression you need to make.
And to make things go to eleven, are they watching on their smartphones while out and about or at home connected to WiFi, meaning they have good bandwidth? How do you tell?
There’s your fifth compression. If you can figure out a way to serve adaptive bitrate videos to mobile devices based on their bandwidth.
Hint: It’s fairly easy to do for devices that understand QuickTime (iPhone, iPad), but those files can’t be understood by Android devices. Sure, you could drop down to Flash, which the latest Android phones support, but do you know which version of Android your viewers are using? One that supports Flash or one that doesn’t?
In the immortal words of Morpheus, “Do you think that’s air you’re breathing? Hmmmmm?”
No discussion of advanced Web topics is complete without some venting about Internet Explorer, so here goes.
Internet Explorer has no idea what you mean with your fancy-pants veedeeo tag. So unless you’re making a mobile-only website, congratulations, you have to fall back to something it can understand. Which would be Flash. Yep. We’re back to 19-effing-95.
I’m still seeing Internet Explorer 6 in my access logs. Not that many hits, but they’re out there. IE 6. The cancer of the Web. It’s mind-boggling, as there are only three reasons for anybody to use IE 6 these days:
You work at a horrifically soul-crushing place run by sadistic morons.
You are using a pirated version of Windows and thus can’t get updates.
You never update Windows. Which makes you a moron. Hope you like being part of a botnet.
Let’s face it, you have to work at it to make Windows not update Internet Explorer.
Internet Explorer 7 is less horrific, but still a massive time sink for Web developers everywhere; the Ocho is almost not insane, and supposedly version 9 will actually be a nice, decent browser that won’t turn the Web into a horror show.
BUT people won’t update. They’ll get Explorer 9 when they buy a new computer with it preinstalled. So the curse of old, nasty versions of Explorer will be with us for a long time.
And you’ll need to support them.
Putting video on the Web is pure pain. You need to do some thinking. And HTML5, great and wonderful as it is, won’t save you.