For some time now, I've been perplexed about how to get a quality video that plays in the Flash media player. Most of the encoded videos I see playing in a Flash player are so heavily compressed, they look, well, quiet frankly, just awful. I know YouTube is encoding more and more of their video, which plays in their Flash player, using the H.264 codec from Apple. Those videos look awesome as the H.264 codec produces a high quality visual result with a significant reduction in file size. But how are they doing it?
After dabbling with this issue for some time, I have stumbled upon a solution. It might not be the "correct" way, but I have discovered a compression process that works. If you have a better solution, do share!
Video files are large: huge, in fact. The original example file I will be using in this post was 403 megabytes for a 1 minute and 45 second video at a size of 820 pixels wide and 550 pixels tall. (This file was already compressed using H.264 when I exported it from a much larger HD movie I had created from 150 of my photographs.) Therefore, we need to compress movie files so they can be played over the internet. When you export a video file, you choose how the video file will be compressed. Compression can become a complicated process really fast because each compression option typically has numerous different parameters.
Perhaps the most important choice is the first one: which type of compression (called a codec--which stands for compress/decompress) you will use. The codec is the way the video is compressed before you upload it to the internet server (compress) and the way you decompress it to play it on the end user's computer (decompress). When a video will not play on your machine, odds are high that your video player (QuickTime, Windows Media Player, RealPlayer) does not have the same codec on your machine the movie was compressed in and therefore can not decompress the file so it will play on your machine.
When an end user plays a video, the computer uses a media player application to decompress the video file so you can watch it. Macs typically use QuickTime. Windows typically uses Windows Media Player or QuickTime, which also works on a Windows machine. When playing a video file from internet, the browser often uses one of these players, often within a browser window, to play the movie file.
Perhaps because Internet Explorer was so issue riddled for so many years, causing QuickTime movies to fail to play in the Internet Explorer browser, many people turned to the Flash player, which works fine on Windows and on Macs. YouTube videos, for example, play through the Flash player to maximize browser compatibility. The only problem with the Flash player is that the codecs typically used for flash movies compress the video so much they create very poor playback quality.
Two of the standard codecs used for movies played through a flash player are On2 VP6 and Sorenson Spark. These codecs shrink the file down significantly! But the problem is they look, well, "compressed." You can see very noticeable "compression artifacts." To my eye, On2 VP6 creates fewer compression artifacts than Sorenson Spark. But both are just unacceptable to me.
The H.264 codec, created by Apple Inc. produces the most natural video image of any codec I've ever seen. Typically, when you have great video quality, the file size is huge. But, amazingly, the H.264 codec gives both glorious video quality and small file sizes. This has rapidly made the H.264 codec very, very popular. YouTube, for example, has started using the H.264 codec for its high quality videos.
Comparison of Codec's Video Quality and File Sizes
In the images below, you can see a comparison of the image quality and the file sizes created by the H.264 codec, the On2 VP6 codec, and the Sorenson Spark codec. The comparisons are all based on an original movie that was 820 pixels wide and 550 pixels tall even though the pictures are considerably smaller.
All of these examples were exported with a data rate of 1,200 kbytes per second, which is another parameter that has a huge impact on video quality. A data rate of 1,200 kbytes per second is insanely high for the web but produces much higher video quality. (The higher the data rate, the more bandwidth playing a single movie file will consume. Web masters typically try to conserve bandwidth as it costs them money.)
You can click on any picture to see the larger image thus seeing the compression artifacts more clearly. Notice, in example one, the QuickTime .mov file compressed with the H.264 codec is by the far the clearest with clean, crisp black borders around the individual pictures in the movie. However it is by far the largest file size!
The Flash flv file, in example two, compressed with the On2 VP6 codec is drastically smaller. But, when you click on the image to see the full size version, you will see that the black borders framing the pictures are noticeably jagged and the image loses detail.
The Flash flv file, in example three, compressed with the Sorenson codec is slightly larger than the On2 VP6 codec but is still drastically smaller than the H.264 codec result. But, when you click on the image to see the full size version, you will see that, not only are the black borders framing the pictures noticeably jagged, but the area around the cactus in the bottom right is heavily pixilated (boxy), the child's face lacks detail, and the image has become blurry.
Again, these issues are not very noticeable until you look at the images full size, in the size the movie file actually will play in the browser. So, in my mind, the question has always been, "How do I get the pristine visual clarity of the H.264 codec into an flv file format that the Flash player can play in any browser with the fewest issues?!" The answer is below!
Quicktime .mov file format, H.264 codec, 1,200 kbytes/sec, 403 megabyte file size
Flash flv file format, On2 VP6 codec, 1,200 kbytes/sec, 18.2 megabyte file size
Flash flv file format, Sorenson codec, 1,200 kbytes/sec, 19 megabyte file size
I took the original QuickTime .mov file compressed with the H.264 codec and exported it as an mp4 file, yet another file format, using the H.264 codec. (If I had only known this little trick when I created the original movie file of the 150 photographs, I could have created the original as an mp4 file using the H.264 codec instead of a .mov file format. Thus, I would have avoided recompressing the file and probably would have acheived even greater visual detail!)
The mp4 file format is considerably smaller than the .mov file format. And since it too can be compressed using the H.264 codec, you get excellent visual quality.
And here's the amazing part. To get the .mp4 file format to play through a flash player, it must have an .flv file extension. All I had to do was replace the .mp4 file extension with the .flv file extension, and, amazingly it now plays in the flash player! But best of all, it is now the smallest file size of all: only 16.1 megabytes!
Keep in mind, as you watch the video below, that the file is actually twice this size. It was designed for a larger window size (820 pixels wide) that will not fit in this blog's post area (about 500 pixels wide). So you are seeing it much smaller than it was intended to be seen.