First, we have to render two versions of our video: an SD (standard definition) and HD (high definition) one. Since the newer iPads, iPhones and Androids all play 720p video, let’s use that as the HD version. Full HD (1080p) is still a bit overkill, due to bandwidth constraints.

For the standard quality version, it’s best to stick to settings that older phones such as the iPhone 2G/3G, HTC Legend and Motorola Droid can play. For example, 360p will work fine. At this size, we can also have the video play without stutter over a 3G connection. Plus, even those rusty 5-year old laptops should be able to play the clip.

Here’s a quick overview of the main encoding parameters for our video. For more info on the encoding side, check a previous blog post on transcoding best practices.

<div id="container">HD video coming up!</div><script>jwplayer("container").setup({  sources: [    { file: "/assets/video-360p.mp4" },    { file: "/assets/video-720p.mp4" }  ],  height: 360,  width: 640});</script>

With this setup, the 360p video is loaded into the player by default. An HD button on the controlbar is offered to toggle to the 720p video. Here is the live example: