Website Helpers.com

  Articles, tips, and resources for webmasters


a project by Michael Bluejay | email

 
Choosing the best video format for your web site

How to use the smallest video format AND ensure compatibility

Feb. 2004 • Updated February 2008

So many formats! How do you get the best video format when you have so many competing criteria, such as:

  • Compatibility
  • File size (smallest format)
  • Video quality
  • Editing software runs on your computer
  • Software is affordable

Well, you're in luck. I went through those questions myself, and I'm about to share the results of my research with you.

 

Use Flash for best compatibility and close to the smallest file size

Here's the easy answer: The format you want is "Flash". It gives you fantastic compatability, and the filesize is just a little bit bigger than a similar-quality video in another format (like H.264/MP4). In the olden days you'd have to choose between compatibility, filesize, or quality. These days you don't have to choose.

Flash is what YouTube and Google Video use, and they use it for a reason: More people can play Flash video than other other format, since Flash is pre-installed in more browsers.

It's true that Flash isn't 100% compatible for everyone, but the point is, nothing is 100% compatible. Using a Flash player is simply more compatible than anything else. If you take one thing away from this page, take the fact that using a Flash player will give you the most compatibility and save you a lot of grief.

Maybe this table will help make it clearer:

What's Preinstalled

PC
Mac

Flash

Windows Media Player

QuickTime

RealPlayer

Flash is the only player that's pre-installed on both Windows & Mac computers. If you use Windows Media format, you leave out your Mac visitors. If you use QuickTime, you leave out your Windows visitors. Yes, those users can download and install extra software so they can view the video, but do you think everyone will do so just to watch your video? The easy solution is to just use Flash, since both Windows & Mac computers have it preinstalled.

In fact, not even all Windows users have Windows Media Player installed! In an April 2006 survey, only 85% of users had WMP installed for some reason (vs. 98% for Flash).

Maybe you're skeptical of Flash because the Flash videos on YouTube look like crap. The problem there isn't with Flash, it's because YouTube uses pretty drastic compression. When you use Flash yourself, you don't have to compress the files as harshly as YouTube does.

Wimpy Wasp is a good
way to get video onto
your website.

Besides exporting or converting your video to Flash format, to get it onto your site you'll also need to install a Flash video player. There are lots to choose from, and I'll cover them later, but if you can't wait to get started then check out Wimpy Wasp.

Here's a rundown of the benefits of using a Flash player:

  • Maximum compatibility. Almost all users can view it without downloading additional software.
  • Tiny, fast download for those users who don't have it already. The competing media players like Windows Media, QuickTime, and Real are huge and cumbersome to install.
  • User-friendly startup. You can have the first frame say something like "Video loading, just a sec...", to let the user know that everything's working and the video is about to start playing. Other media players typically provide no feedback to the user, just a blank window.
  • Watermarking. You can add a transparent logo to the corner of your movie (such as the name of your domain) and link it back to your website. So people may be less likely to steal your video, and if they do, it's an an automatic ad that takes people right back to your site.
  • Ability to make your own custom controls. Try doing that with another media player.
  • Full-screen video. Getting full-screen video is easy with Flash. It's usually impossible with other formats/players.
  • Piracy protection. It's very difficult for users to save your video to their hard drives and then post it on their own websites. On the other hand, if you want users to have the ability to download your video, then this would be a downside. In that case, your best bet is .mpg for maximum compatibility.

        Some of these tips are from WebmasterWorld.

Of course, the world wouldn't be complete unless there were also some downsides of using a Flash player:

  • More work. You have to convert your video to Flash format first. True, it's only a little work, but it's still more work than just throwing a completed .mov or .wmv onto your site.
  • Visitors can't easily download the video. Unless your visitors are especially savvy, they can only watch the video, not download it. That's a plus for most webmasters, since they don't want their work easily copied, but if you do want people to be able to download, then that's an issue. If you want to use Flash but still want visitors to be able to download, you can include a link to a separate.mpg, .mov, or .wmv file.
  • File size. Flash video takes up a little more space for the same amount of quality compared to tiny formats like H.264 .mov's, .mp4's, and .wmv's. Fortunately, the difference is really small.

 

Converting video to Flash

Okay, say I convinced you to use the Flash format. Now how do you convert your video to Flash? There are two different ways to do it, use an online service (like YouTube), or get some software you run on your own computer. When you use an online service they not only convert the video, they also host it. And they give you the code you need to have the video shown on your site. Best of all, all these sites are free. Here's a list of video converting/hosting sites.

Online Services to convert your video to Flash

Sites that convert your video to Flash

Video Size Limit
Output Specs
Other

YouTube
(see my YouTube guide)

1 Gb, 10 minutes
300 kbps, 25fps, 320x240

Considerable loss of quality.

Google Video

no limit
450 kbps, 320x240(stream)
800 kpbs , 480x360 (download)

The only service that will convert Real Media files (in addition to Windows Media, QuickTime, MPG, and AVI).

Vimeo

500 Mb uploaded per week
no duration limit
500 kbps for SD
1600 kbps, 1280x720p for HD

Revver

no duration limit
500 kbps

Ads always appear at end. Ad revenue is split 50/50 between you and Revver. Can also add pre-roll and overlay ads (show in bottom fifth of frame) if you like.

Viddler

500 Mb
448 kbps
(400 video, 48 audio)

Video is streamed (not downloaded). Has the ability to show ads and share the revenue with you, but the interface is clunky and poorly documented.

Veoh

no limit
495 kbps, 544x416
Powerful compression while maintaining quality, video filters

Since YouTube is so youbiquitous (sorry), I have a separate page about using YouTube.

 

Instead of using an online service to convert your files, you might choose to run conversion software right on your computer. You might prefer this method for any of these reasons:

  • You have a lot of videos to convert and don't want to hassle with uploading them to the web service.
  • You want to use a specific video player. (i.e., You like the controls or interface of some certain video player better than the one provided by the online services.)
  • You don't like the ads or links added to the player by the online service, which allow visitors to click off of your site.

Even if the above applies to you, consider that a primary benefit of online services like YouTube is that they let people find your video in the first place. YouTube gets a lot more visitors than you do. If you use an online service, you will almost certainly get more people watching it than if you have it only on your site. Of course, it's possible to have the best of both worlds: You can use standalone software to convert the video for use on your site, and also upload your video to an online service to give it a wider audience.

Below is a list of software which will convert your video to Flash. If you go this route, you'll also need to install a Flash player on your site. This is sometimes as easy as copying a single file to your server. In two of the solutions below, the Flash player is included. (Flash Video MX and Adobe Flash Professional)

Standalone Software to convert your video to Flash

Software to convert video to Flash

Cost
Runs on
Formats Converted
Other

Riva FLV encoder

Free
Windows
WMV, QuickTime, MPEG, and AVI

FFMPEG (separate page for Mac version)

Free
Windows, Mac, Linux

Mac version is easy, but Link/Windows version is highly technical and for developers, not newbies

VisualHub

$23
Mac
Nearly everything

Converts to most formats, not just to Flash. Easy, batch mode, dynamic preview, stitch files together,

Flash Video MX

$50
Windows
WMV, MOV, MPG, MP4, ASF, AVI, RealMedia, and more
Watermarks, video effects, music

Sorenson Squeeze for Flash

$249
Windows & Mac
WMV, MOV, MPG, MP4, ASF, AVI, more (but not RealMedia)

Converting WMV on the Mac version requires Flip4Mac.

Powerful compression while maintaining quality, video filters

Adobe Flash Professional

$699
Windows & Mac
(Couldn't find the list on their website.)
The full Flash development software; too many features to list.

If you use standalone software to convert your video to Flash format, you'll install a separate Flash video player on your site to actually play the movie, which is often as easy as copying a single file to the server. We'll cover that in the next section below.

Whether you use an online service or standalone software to convert your video, you're probably wondering what format should I use before I convert it to Flash? So far as I can tell, it doesn't matter. Flash has its own compression, so trying to crunch the file real small before converting it to Flash just results in a video of very poor quality. Give Flash a high-quality video, and let it do the compression. But since you want an answer, I recommend the H.264/MP4 combo, 29.97 frames per second, 320x240, max quality.

 

Flash video players

If you use an online service like YouTube or Google Video then you don't need a Flash Player. The online service runs a Flash player automatically when you use the embed code they give you. The only time you need a Flash Player is if you used standalone software to convert your video to Flash.

If you used Flash Video MX or Adobe Flash Professional to convert your video, then that software provides a ready-to-go Flash player for you to use. Congratulations.

If you used some other software to convert your video to Flash, then you'll need to install a Flash Player onto your server. Here's a small sample of available Flash video players.

  • Wimpy Wasp ($30)
  • Jeroen's Player (free for non-commercial, 15 euros for commercial use for each website)
  • Tufat Flash Video Player ($5; I haven't tried this one; requires you to install to see a video, since there's no sample on their website)
  • FlowPlayer (free; but I couldn't get full screen to work)
  • Stage Gold (free, but (1) you have to register an account, (2) in my test, it insisted on loading the whole damn video before it would start playing; (3) according to a forum post it requires Flash 9 (most other players work with players as old as Flash 7); on the plus side, they host the player file [you don't have to upload one], and they have a gazillion interesting skins/themes to choose from)

As you might suspect, the free solutions aren't as full-featured or as well-supported as the $30 solution.

  

Alternatives to using Flash

Okay, let's say that for whatever reason I couldn't convince you to use Flash. What should you use instead?

The next-most compatible format is an .mpg format, since if a user has either Windows Media Player or QuickTime they'll be able to view it. (iMovie on a Mac won't expert to .mpg, but you can use the cheap VisualHub software I mentioned above to convert from QuickTime to .mpg.) But that compatibility comes with a price: .mpg files are much larger than modern formats for the same amount of quality -- sometimes up to twice as large.

After .mpg, the next-most common format is Windows Media (.wmv), but Mac users can't see it without installing extra software.

Apple's QuickTime (.mov) is at the bottom of the list because it's only pre-installed on Macs. Windows users can install QuickTime, but of course many of them won't bother to install software just to watch your video.

I have a separate article that explains all about the different video formats for the web.

 

Smallest file sizes vs. video quality

If you're ultimately converting to Flash, you don't have to worry about squeezing the file first, because Flash will do that. In other words, give Flash a nice, big, high quality file, and let it do the compression.

If you're not converting to Flash, then most modern software seems to do a pretty good job of compressing video while maintaining quality, and there doesn't seem to be a major difference in file size or quality from one to the other. By "most modern software" I'm talking about Windows Media Video created on Windows, and QuickTime when exported using an H.264 or Sorensen 4 codec in Apple's iMovie. H.264 is the preferred codec these days, partly because of its ability to produce the best quality for the smallest file size.

No matter what format you use, you get to choose the quality you want for the final product. Usually you do this by specifying the data rate, which is how much data per second of video you want the file to have. Obviously, the higher the data rate, the better the quality, and the bigger the file size. So what rate should you use? You probably want 300 kbps at a bare minimum, since that's what YouTube uses, and YouTube isn't especially renown for quality. You can go for a higher rate if you want more quality, but you'll likely have decreasing returns at anything over 600 kbps. That is, an extra 25% of bit rate won't get you 25% more quality, it'll just give you a fraction of that.

 

Different Flash video formats

  • .flv - This is the raw video file itself. This is what you get after converting from .mp4 or some other format. This is what your Flash player will play. It stands for Flash Video.

  • .swf - This is the format of the Flash video player software (e.g., wasp.swf for Wimpy Wasp). With most Flash players, you need only copy one of these .swf player files to the server, even if the software comes with a bunch of files (and it usually does). The extension stands for ShockWave Flash, an older name for Flash.

  • .fla - You'll probably never see this format. It's only relevant if you're building Flash projects with Adobe's Flash Development kit. Most of you won't do that, you'll just download a Flash player that somebody else wrote, like Wimpy Wasp. If you do create your own Flash projects with the development kit, then the .fla format is just a Flash document (a software or animation project you created). But this format doesn't run on the web. You use the Export command to convert your project into a .swf file, and that is what you actually upload to your server.

What is Streaming?

For most purposes, streaming is unnecessary and you don't have to worry about it. In the olden days of the web, an entire video file had to be downloaded before it would start playing. That was kind of annoying, of course. So some programmers came up with streaming, which has the video player simultaneously play the video as it gets the data. But it didn't take too long for other programmers to figure out they could do "fake streaming" (aka "progressive download"), where the video starts playing as soon as enough of it has been downloaded that the user can enjoy continuous playback. All modern video players (Flash, QuickTime, WMP) employ fake streaming, so for the most part, streaming is no longer necessary.

If you do want to go the streaming route, you have to indicate that the video file is to be streamed when you export it from your video software (look for a checkbox to that effect), and you have to use a special streaming server. Dreamhost offers streaming servers on even their cheapest ($10/mo.) webhosting plan. But me, I've never streamed my video because I see no advantage in doing so.

 

My other web video articles

Web video file formats. Exactly what you'd expect: All the different formats explained and compared.

Getting video onto your site with YouTube. Explains the pros & cons of using YouTube to get video onto your site, and exactly how to do it.

 

Other Handy Mac utilities

MPEG Streamclip. For both Mac & Windows, lets you easily edit .mpg files in a QuickTime Player-like interface. Also joins movies together. Nice. Best part, it's FREE!

Visual Hub. This is the Swiss Army Knife of video conversion. It's fast and simple, and only $23.

Contacting me

Please don't send me your questions, I can't answer them. If I knew the answer it would be on this web page already. In any event, I already have several thousand messages in my In Box, and it's impossible (not inconvenient, but impossible) for me to reply to even a fraction of the people who want my help. I just can't function as a free helpdesk to the world. On the other hand, if you have corrections or other useful information you want to share that I can add to this page, then please send it to replies+video(at)michaelbluejay.com. Questions sent to me never get answered.

More resources

Website Helpers.com

  Articles, tips, and resources for webmasters


a project by Michael Bluejay | email