#The Problem

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)

Sounds easy? Just encode an MP4 in HandBrake, and JWPlayer will do the rest? Nearly.

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.

#The Solution

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.

#The Code

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.

<div id="myVideo"></div>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
  jwplayer.key="thisisthejwplayerauthorisationkey=="
  jwplayer("myVideo").setup({
    file:     "vip9.mp4"
    width:    720
    height:   400
    primary:  "flash"
    analytics: {
      enabled: false
      cookies: 
    }
  });
</script>