Understanding High-Definition Video On The Web – H.264

U

When most people are starting out, trying to get their first video online, they are happy to simply get something out there. Quality concerns are usually buried somewhere down towards the bottom of the list.

But usually, after they’ve broken through that initial learning curve, they’ll want to know how to get their videos looking as gorgeous, as say, the videos they see on Apple’s site.

And that’s when they stumble upon…and get totally confused by…something called h.264.

H.264 (or MPEG-4) is the high-definition video format on the web. It was originally spearheaded by Apple, in large part, as a way to get high-quality video…at small file sizes…onto devices such as the iPod. In fact, these days, any video you create in the QuickTime format (Apple’s video format), will be done using h.264.

But it wasn’t until Flash (the dominant video format on the web) began supporting h.264 with Flash Player 9, that “high-definition” web video began catching people’s eyes.

In a nutshell, the h.264 format gives you outstanding quality at really small file sizes. Let’s start with a 45 second video in an uncompressed AVI file format (170 MB large) as an example. When we encode that file into a Flash video, using the high-quality VP6 format, we get a great looking video that is 7 MB in size.

However, when we encode that same file into a Flash video using h.264, we get a noticeably better looking video that is 2 MB in size. And again, that’s the allure of h.264…better quality, smaller size.

But it’s not all roses. If you want to use h.264 for your videos, there are some things you need to know first.

Now as I previously mentioned, virtually any tool you use these days to create QuickTime movies, will by default, use the h.264 codec. Problem is, only about half of the people on the web will be able to watch your QuickTime movie without first being prompted to download the QuickTime plugin (and many will be too intimidated to do so, opting to click away instead).

The more popular route to go is Flash. But that presents it’s own problems. First, the viewer must have Flash Player 9 or above installed on their computer to view h.264 videos (and if they don’t have it, they’ll have to download it…just like with the QuickTime plugin).

After that, the player you use for your Flash video files must support h.264 as well. A free player, like the JW Player here, does support h.264. But many do not. And it leads to a lot of frustration with web site owners wondering why they can’t get their shiny-new h.264 videos to play.

Beyond those headaches (which by the way are easily bypassed once understood), the h.264 format does offer a “secret” that’s really cool.

What’s the secret? Well, Flash Player 9 automatically knows if a video is h.264…even if it was created in a format other than Flash. That means you can create a QuickTime movie, rename the file extension from .mov to .flv and the video will play fine as a Flash file. This is especially useful to know since many of the best options for creating h.264 files will only create videos in the QuickTime format (files with a .mov or .mp4 extension).

Want to see just how good h.264 videos can look? Well, check out these breathtaking examples from Apple’s site:

HD Video Gallery

Movie Trailers

P.S. You don’t have to shoot high-definition video to take advantage of the h.264 format on the web. It works just fine with standard definition video too.

9 comments

  • Those are great tips as usual for this blog. I have tried many tricks to convert videos to suitable quality and size, and still I haven’t heard about h.264.
    Today I realized that .mod files (camcorder hard drive extension) can be renamed to .avi files and used in any video editing software without converting them beforehand with other cumbersome software. So it seems is the case with h.264 .mov and .flv.
    My concern now is whether I use Flix Pro for converting .avi to quality .flv with players or I can do it within some advanced programs like Adobe After Effects or Adobe Premiere Pro with the same options and opportunities? It would be nice to know before buying Flix Pro Studio for 420 USD. Thanks.

  • Alex,

    Adobe licenses the VP6 codec from ON2 (the makers of Flix), so it’s likely you’ll get the same quality FLV file from Premiere that you would using Flix Pro.

    What I’m not sure of, is if Adobe licenses ON2’s “high-definition” codec (VP6-S)…which is basically the Flix version of h.264.

    I’ve tested the Flix Pro VP6-S codec for Flash, against “Mac only” products that create h.264 QuickTime files. And while video quality is subjective, in my opinion, the QuickTime products produced clearer video every time. And again, you can just rename the extension on these files from .mov to .flv and they play fine in Flash Player 9.

    Dave

  • Hello Dave,
    I have been following you for more than a year, unfortunately since last February I am unemploied and I can’t yet afford to become a member, but I will as soon as this economy gets better enough to allow me to go back to work.

    I have a question about your (great) tip on renaming .mov to .flv.
    The player I have on the site is the JW so as you say it should work… but when I try to play it shows the loading icon going round and round for ever, even after 5 minutes the video still doesn’t start playing.

    As I was trying to make sense of it I noticed that the size of the file I was trying to test is 541,437,132. I am a total newbie but it seems to me that a 550 megs file is huge. I produced the file with Movie Studio (Vegas little brother), saved the file as Quick Time 7 (*.mov) default template (uncompressed). I assume the ‘uncompressed’ is the problem causing the huge size.

    What compression option should I use when producing for web publishing and what size range would be acceptable for 30 secs movie, once the file is .mov, when working with the h.264 quality for web publishing?

    Thank you
    very much.
    Marco

  • I have .mp4 produced in Sony 9 and none of the players will play it or from what I’m told the video most be fully loaded. All 738mb of it. How do you fix this?

    Same on JW or Flowplayer. And the little renameing to .flv does not work on this.

  • Hello,
    I have just begun filming with my HF s11 canon legria. Using either an external mic or internal I hear a loud buzzing via the headphones. This doesn’t affect the recording but obviously something in wrong.
    Any ideas?
    Many thaks