To try and encode video that plays in all of the following:
- iPhone (Safari, Chrome)
- iPad (Safari, Chrome)
- Android (Browser and Dolphin)
- Windows (IE7 and up, Chrome, Firefox, Opera etc.)
- OS X (All current browsers)
JWPlayer will work just fine however the various different devices can be pretty picky about the exact encoding format. Android and IE9 in particular get all distressed and soil themselves if it isn’t just-so.
After hours of Googling and experimentation with encoding formats and details these are the Handbrake settings that worked for me.
The significant option selections are highlighted with red circles.
The key here is to choose MP4, encoded in x264.
The ‘Level: 3’ and ‘Profile: Baseline’ bit is for support on older Android devices. Checking ‘Web Optimised’ moves the MOOV Atom to the front of the video, which means that it streams properly (otherwise your browser has to download the entire video before it can start to play).
I don’t think I changed any audio settings. These see to be the default settings for x264 and they work just fine.If you started off by using a preset you might find that Handbrake has re-sized your videos to a more standard aspect ratio. Click ‘Picture settings’ at the top of the main interface to see the size at which your video will be output.
If they are not as you wish then change them here. Uncheck the ‘Keep Aspect Ratio’ option if it will not allow you to select your preferred dimensions, and switch ‘Anamorphic’ to none (unless you want the black letterboxing effect). Also check the ‘Cropping’ is set to zero.
If you are using html5 <video> tags you won’t need the below. We needed to provide a Flash fallback as our browser support went back to pre-html5 browsers.