Select Page


How To Get The Best Video Format For The Web

In part one of "How To Get The Best Video Format For The Web" I spoke mainly about testing various renders from my NLE as this was goal number 1, get the best, sharpest, most colour rich render I possibly could, regardless of video format or size. For me this was an m2t file right out of Sony Vegas Pro. The colours really popped and the contrast saw the blacks looking like proper deep, dense blacks not washy greys. The m2t file was a great combination of colour saturation similar to a WMV file and the sharpness of an MP4 or M4v video, neither of which looked as good as the m2t, so decision made.

Incidentally, you can simply change the extension of an m2t file to mp4 and it'll play beautifully in your chosen MP4 player – VLC Media Player being one of my favourites.

Once a successful render had been achieved, the next phase was transcoding these mega files into a decent web size and format. The m2t files were usually somewhere between 1GB – 2GB for a 10 minute video) at 1280 x 720 x 25p and this is clearly unusable online, so time to open every transcoder/converter I had and heat up those cpu and graphics cores!

It would be easy to explain every tiny adjustment I made to each and every conversion, but you'd drop down dead of complete boredom and I'd be typing for the next couple of months. Afterall, you're reading this because you want the meat and potatoes, not the scraps, so I'm going to cut out all that crap out and give you the results first.

So Here They Are………..

The best format conversion was to an MP4 using the H.264 codec and the software that performed this miracle was – VisualHub. Sad thing is, it's Mac only and is no longer available, so if you see a copy anywhere, do yourself a favour and grab it, it'll be well worth it. Now I'm generally a PC user, but, (Ed Dale's gonna love me for this) since using a Mac I can hands down say that if they do one thing well and one thing only, its how brilliantly  they handle images. Whether they're still or moving, Mac's can toss your footage around, bend it, stretch it, mash it up and put it all back together again and still pop out a render thats far superior to anything I've experienced before.

So there you have it, an m2t to mp4 conversion via Visualhub using the H.264 codec and I have a web-ready file of around 50MB for a 720 x 400 px video.


Okay, here's what you should go and do now:-

1.   Master and render out your video to the best possible quality achievable. Disregard file size at this point, just do some tests to get the best possible colour, contrast and motion smoothness you can. You can worry about file size and web-format – see the video converters section below.

2.   When performing your tests, pick around 5 – 10 seconds of footage to test with. Don't render a 12 minute video only to find it's not what you want.

3.   If you're still unsure how others will see your videos, then view them on other devices. My Mac, PC, laptop and Plasma or LCD TV's all look different, so test and do a visual check on several screens if you can. I usually do about 5 or so different colour and sharpness renders and then burn them to a DVD so I can go to all the other screens and test. This works well for me and also allows me to see the same size video on different sized screens.


** Video Rendering Tip **: For the best quality renders, always try and keep your video aspect ratio's to multiples of 16. You can use 8 and indeed 4, but I'd recommend 16 for the best quality results. I've played around and edited video with odd screen sizes like 705 x 405px and 640 x 270px and they just have so many unwanted artifacts around the edges, especially white text, that seems to suffer quite a lot, but there was marked visual improvement when I changed the resolution to a size that was divisable by 16 like 720 x 400 or a smaller 640 x 272px (I like that uber-widescreen look on smaller videos sizes) even though 640 x 320 is more common – Pah! who likes common?


Alrighty then, techie video nerds, continue if you do so desire:


Now an mp4 video file is still not the most web-friendly format, but it was the right size and quality I was after, so I then looked at converting this into something the web would prefer like a SWF or an FLV video or similar. Here's a list of the software I tested – used – bought – borrowed – demo’d – stole – pillaged – abused – used on a mates machine etc.

 

I've placed them in a "converter/transcoder I found most useful" order:

 

1: VisualHub
2: Handbrake
3: Super ©
4: AVS Video Converter
5: Allok MPEG4 Converter
6: Prism Video Converter
7: Ultra Video Converter
8: Xilisoft FLV Converter 3

At time of writing, there was a new version 0.9.4 of Handbrake available, I used version 0.9.3 in this test, so I have not tested the new one yet, but if it stacks up to the release notes, then more improvements can be expected – Yo Mamma!

What I really like about all the software above, is the ability to change a wealth of parameters. Being able to setup up my own presets is something I really like, because it enables me to have exactly what I want for a particular project and not what someone else thinks I may want. With that said, I always try the presets first if there are any, because afterall, the creators of these software titles know what they're doing and I'm pretty certain they've tested all the options to death in order to find the best results and then made those into presets, well, that's at least what we're hoping they've done.

It was soon obvious that not all presets did what they said on the tin. The only real way to find out was to test all the ones that came close to my desired outcome. This would also be an easy way for me to tweak some settings afterwards and save my own presets based on the originals. I've found this to be the best practice throughout most of my tests.

After choosing my desired video resolution and frame rate, video kbps and audio sample rate and bitrate, it was then a case of finding out which video rendering engine performed the best with my large m2t file. Now the footage I used for most of my testing was my video guitar course, which is a tuition based video course that teaches you how to learn to play guitar. Now 99% of the footage is fairly static, single shot, straight on to camera, so there's no great movement involved which is great as this really tests the rendering engine because when you're testing with both high and low level motion within a video, it's more difficult to be subjective to the quality of the render as you always have the added variable of the amount of motion within the video. With this taken away from the equation, I was able to achieve more accurate results in my low-motion tutorial video.

I began testing to see how many kilobits I could get away with, ie, what's the lowest kbps (kilobits per second) I can use and still achieve excellent quality, no pixelation, smooth transitions all with a small file size. Most of us know that video compressed for online use is always a bit of a trade off between 2 main factors – quality verses file size. Once again this is where the amount of motion and transitions in your footage come into play, if there's less visual data in a scene, then the bitrate can be lower – another decision to make when choosing between variable or constant bitrate.

Anyhow, I found, (as with most types on online video), 768kbps to be an ideal bitrate for streaming video from a server to the client. On Crash Course Muso (my online guitar course) I chose to display a 720 x 400 MP4 video size via EZS3.com who convert my MP4 into flash video and wrap it up in a nice video player. You will need an Amazon S3 account if you want to use this facility, but given that it's dirt cheap and a great secure video host, I'd recommend you do that anyway if you're considering distributing any amount of media across the world wide web. Another option is new-comer "Easy Video Player" who offer a similar video content management interface but with a one-time payment only as apposed to EZS3's monthly plan. They both look pretty similar so although I haven't yet checked out Easy Video Player I will do so within the next few weeks and most likely write about it at some point.

Soooooo, there's a couple of possible distribution ideas for you, now all you need to do is convert your video the best format for the web you possibly can and to upload it. Well you already know that my huge m2t video was way too big to consider uploading, which is why I made my master video – an MP4 with a 768kbps cap limit in Visualhub. This gave me something usable to use as a master to upload to the net.

Youtube likes 720p MP4's, so does Facebook and pretty much all other video sharing sites, so using an MP4 as your master gets pretty good results all round. It's also worth mentioning that Youtube converts better with a 30 frames per second video. I've done a couple of test on this and I think it's less relevant these days, perhaps a couple of years ago when their conversion were terrible, but to be honest, now they're pretty good and with the introduction of 1080p, its only going to get better – at last. Anyway, that's all fine and dandy for video sharing sites as they are converting/hosting for you, but what if you are wanting to put that wonderful MP4 on your own website?


Which Format To Put On Your Own Website

Well, that's where the converters come in. I love using "Super" for that. It can chuck out just about all the likely formats you'll ever need for the web and I'm currently using it to make some nice video banners for my Crash Course Muso affiliates and it's converting either my m2t or MP4 files nicely into SWF (Flash) video files to easily use across the web.

PC Users – Use Super or Handbrake
Mac Users – Use – Handbrake (MP4 & MKV Containers only) – (if you can't find VisualHub)

With the above said, if you do use a service like EZS3.com then there's no need to convert your MP4, you can simply just upload it and they'll do that for you behind the scenes. All you need to do is upload it and choose a few player options and you'll be given some neatly packaged code you can drop right into your website, blog or anything els you can drop code into!!


So To Summarize:

** Just as a quick note. If you can render directly to a decent MP4 from your NLE and you're happy with the results, great, do that. There's no need to go through all this converting jazz if your MP4's sparkle right from the outset, but mine didn't, they looked washed out, hence the slightly long post.


  • Render out the shinest, squeakiest,  video file you can – with lots of rich colours and contrast from your NLE.
  • Convert to an MP4 for your master video.
  • Upload it to a sharing site and let them transcode it.
  • Convert yourself using your preferred software or one of the above software converters listed above – (with a sensible kbps limit for streaming)


Don't forget to save or write down your settings. After a laborious testing session you don't want to go through all that again next time you're making a movie masterpiece

The above should give you a decent looking quality video at a reasonable file size for use across the web. I hope you managed to find something useful in this post and please let me know your video transcoding and encoding results in the comments – thanks.