guide for compressing videos for web

[Chris Blair]

We need more info to give you good help. How long is the video? What is the pixel resolution and aspect ratio of the original file. What is the pixel resolution of the encoded file? What codec are you using?

I’ll make some guesses while we wait for your answers.

I’m guessing your 1.4GB file is about a minute? If that’s right, then a 12MB 60 second mp4 video file should playback fine on most cable based internet connections in a flash based player. If it’s shorter, say 30 seconds, it might playback on fast connections and certainly from a hard drive based website…but it could struggle on slower connections.

We try to keep videos to about 6-10MB per minute, which seems to ensure reliable playback across a wide range of connection speeds, computer platforms, browsers, flash player versions etc.

If it’s an art project, I’m also guessing the website isn’t actually on the web, but on a hard drive?? If that’s the case, then there is absolutely NO reason why a 12MB file won’t playback smoothly.

From my experience, flash developers and designers rarely understand video compression or video specs. In fact, web designers in general and IT people specifically don’t understand video for the web. Video people who also do websites understand video for the web.

Another thing that could cause issues is the flash player interface. If it’s not well-written, it could very easily cause a perfectly prepared video to stutter and NOT work. There is an entire industry of pre-built flash video players (JW Player, Flow Player to name 2) that thrives because of this issue. It makes absolutely no sense to custom design a Flash video player when there are half a dozen choices of pre-built ones that allow custom skinning. Why? Because these folks have tested and tweaked their code for years to optimize playback and compatibility with the latest video codecs.

Chris Blair
Magnetic Image, Inc.
Evansville, IN
http://www.videomi.com
Read our blog http://www.videomi.com/blog

[Renee Litapop]

thank you for the questions and advice.

it is a web-based art project, so it does need to stream from the web to be viewed (i.e. not on a hard drive).

there are lots of little videos. the lengths range from about 10 seconds to 1 minute.

they are shot in HD at 1920 * 1080, 30P. i am exporting from final cut at full resolution. i believe the original shooting format uses H264 as a codec (it’s a canon T2i DSLR). in compressor i’ve been cropping to 4:3 (because there isn’t much visual information besides in the middle of the frame, so i thought it might save space / file size to get rid of the sides), and compressing to H264 (960 *720 resolution… which is what vimeo plays in HD, which has been what i’ve been using for reference).

so… based on your suggested file sizes, my files do seem to be maybe too big. my 1 minute compressed file is about 16 MB. my 12 MB file is about 36 seconds. so it does seem that i need to find a way to make smaller files. though, again, i’m curious about how vimeo is able to play back such big high resolution files when it’s in HD mode (i’ve loaded some of my videos onto vimeo, again for reference to see how they look there, and they seem only slightly smaller file size than my own compressed files).

anyhow… so it does sound like i need to make my files smaller. if you could suggest a workflow and some parameters that would be really great. again, it’s a very simple image of hands writing stuff on paper with a black background, but it’s critical that the text looks sharp or else it’s not legible.

my flash developer guy indeed does not know very much about video… which is why i’m trying to figure this out. i probably know more about video than him (i’m a filmmaker and editor) but have no experience preparing video for streaming / web.

what are the flash players that you would recommend? i can tell my flash person if you think that makes a big difference.

thanks again for your help!

[Chris Blair]

960×720 is quite big for web video and while it will play on some end-users computers, there will be many more that it will simply NOT play on smoothly at that size.

As an example, I’m typing this on a 4 year old Gateway laptop, and Vimeo, YouTube and Hulu HD videos will not play without constant stuttering or buffering on my computer…and it’s well maintained, is very fast for it’s age, and I have a 20Mb/sec internet connection.

There’s no real “trick” to what Vimeo is doing. If you use a decent encoding program (Handbrake is free and very good), you can get your data rates as low as 750Kb/sec and still get very good looking video using H.264. At that data rate, a 1 minute video would come in at about 6MB. You could go as high as 1000Kb/sec and get good results. But it will look much cleaner if you go a little smaller on the pixel size…say to 720×540. Also…if there is audio, you can go as low as 64Kb/sec and it will sound fine. Use a bitrate caluclator to see what data rates you need to input. You can find one here:

https://www.3ivx.com/support/calculator/index.html

Just do a test at various pixel sizes but using the same data rates and see which ones look the best and play the most reliably. Again…there is no real science to it…just trial and error.

As for Flash Players, the two I mentioned are great, JW Player and Flow Player…but if your web partner isn’t familiar with them there is a good size learning curve with each of them. Wimpy Player’s Rave is another good player option that’s a tad easier to implement… and FLVPlayer is yet another decent one. Just google them.

The problem we’ve seen with Flash programmers is they build bulky, code heavy flash player interfaces that are often the real source of the playback problems….NOT the video itself. Plus, Flash Player in general is a renowned resource hog on almost every computer platform. As an example, I can compress a video to 640×360 H.264 and embed it by itself in a flash player on an otherwise blank HTML page and my old Windows 98 test machine chokes on the video at about 3 fps. I can then open VLC Player and connect to that same H.264 video file on the same server and that same video will play at 30fps on that 10 year old Windows 98 computer with a 1Ghz processor and 256MB of RAM. The ONLY difference is the player interface. It doesn’t matter if I use JWPlayer, FlowPlayer or a custom Flash Player, it won’t play on that old computer. But that file WILL play using VLC and connecting directly to the video file.

Now that’s a ridiculous test, but it illustrates how Flash impacts plaback performance. Another example is services like Netflix, who stream full HD movies wirelessly without problem using hardware devices like the X-box, PS3, Wii, Apple TV, Roku etc. The video stream is decoded using hardware, but it’s still being “streamed’ via wifi! Which means the data rate is probbably under 1.5Mb/sec! So it’s not always the data rate that determines playback. Decoding the video once it “arrives” so to speak is also a part of the equation.

Chris Blair
Magnetic Image, Inc.
Evansville, IN
http://www.videomi.com
Read our blog http://www.videomi.com/blog

[Renee Litapop]

thank you — i think i get it now! that calculator is very helpful.