Thankfully with the advent of ‘smart’ phones in everyone’s hands nowadays, I am no longer compressing video in tiny 3GP old school mpeg wrappers for mobile customers. However, one big thing that I learned while creating compression profiles for ATT Media Mall and Verizon V-Cast back in the day was the appreciation of this constant compromise:
How do I make video look and play good (or good enough) on so many cell phones or newly dubbed ‘devices’?
I thought I might be able to make some other editors and compressionist lives easier by doing a 3 part blog about encoding for today’s web browsers and what I use that works. In the past few months we launched 2 fully capable HTML5 websites – one for Coke Zero’s Tron iPhone game and one for American Express’s new travel service called Nextpedition.
Well, going back to the question “how do i make video look and play good”, the answer now is – Make a lot of compressions and TEST. Don’t just watch them with one setting applied use several and see what is looking best for your edited show. Current HTML5 sites need to supply 3 different video sources, those are:
- Ogg Theora (to support Firefox)
- Webm (to support Chrome, my favorite browser)
- H.264 (to support everyone else, and by far the most advanced codec using X264)
Enough boring banter, here is how I am currently creating Ogg Theora video to supply my web developers for HTML5 sites.
- Create a scaled master in After Effects to the output resolution (for me lately this has been 512×288, although I’l like to lean more toward 768×432 in the future)
- Use Chris and Trish Meyer’s trick with unsharpen mask and composite CC to sharpen it up when possible
- Here is the catch – Export as Animation codec (the terminal tool won’t accept ProRes)
- Download ffmpeg2theora and install
- Open terminal on a mac
- type the following: ”ffmpeg2theora -V 800 –soft-target –optimize –two-pass -a 3″ without the quotes, this is a good setting to use for a lower end server. If you have a better server you can easily get away with setting the data rate (-V 1400) kbps and get a cleaner encode.
- this encodes a .ogv video at the same path as your source. Test with VLC player.
Compressing Ogg Theora video for HTML5 from Chadwick Shoults on Vimeo.
Another useful tip is if you type in “man ffmpeg2theora” in the terminal, you will pull up the manual which is super helpful for understanding the options available. If you are not so inclined to use terminal, there also is a quicktime component plugin from xiph that also creates usable Ogg video (just not as customizable and quality suffers a little).