I am writing this post to compare my findings around real-world use of video in HTML 5 with others. My hope is that some of the people who have made extensive use of it will weigh in on what I think are the biggest problems with it.

I’m going to skip the whole debacle around h264. I love the codec, it was painful to see it get derailed as Google, then Mozilla declined to use it. Then actually Google did use it. And now it’s in a weird place where Firefox is going to use it, but only if the codec came licensed with your operating system.

The biggest problem with HTML5 video is the lack of information or standards on how it is implemented in browsers, period. Let me describe one of the weirdest scenarios I’ve come across in extensive testing because I really want to know if anyone has useful input on this.

In Chrome, the h264 codec is supported, and seems to work just great on short videos (like 5 minutes or less). However, Chrome seems to stutter and choke with longer videos (30 minutes for sure) no matter what you do. I have extensively tried different compression settings and formats. I’ve served the video from a wide variety of servers, and also tried using a CDN. None of this makes a difference.

Chrome ignores the “preload” attribute on video tags…..except it doesn’t, it just seems to! Try setting preload to “none” and you’ll see that Chrome IS actually using it – the video will not load anything, even the first image will not be there (if you don’t set the “poster” attribute). For sure Chrome is recognizing the tag.

Yet with a longer video, you will not see the load bar filling with preload set to “auto”. And even on short videos of a minute or two, you will see it fill only so far, then stop.

[video sample is gone]

In Chrome (version 22.0.1229.94) , the video above gets to 20 seconds, stutters and dies. Results vary but I show it consistently doing this at some point. The same video in Safari buffers enough to prevent this behavior. This is not a problem with the server.

What I Think is Happening

Chrome will preload video, but it has an extremely small buffer for it – only 2.84 megs, compared with other browsers that allow 10 to 20 megs for this. It opens an http connection (and by the way it will ONLY open six connections at a time) and persists that connection. The idea is that if you actually play the video, the open connection should keep loading video and the 2.84 megs is your safety buffer. I’m sure the idea was to lower the amount of loading that happens needlessly.

The problem is that on longer videos the open connection fails. The buffer is not nearly enough to provide a good playback, no matter what compression settings you use. It’s about the length of the file, not the actual file size.

Did the developers make a conscious decision to optimize Chrome for short videos? Perhaps they are encouraging streaming for anything longer. If I’m missing something, please do let me know!

The fact remains, no matter if your connection is good (2 megs up, 24 megs down) video will fail and stutter in Chrome using the HTML5 video tag. It doesn’t matter if you preload or not. In fact, there is almost NO reason not to preload in Chrome because it’s not going to preload very much anyway.

Safari treats it differently. It will happily download an entire 30 minute video if left alone. I’ve tested the exact same 30 minute video across browsers and this behavior is consistent whether using a CDN or not.

Below is the exact same video served through Flash, which does not seem to have any issues at all.

[video sample is gone]