HD Video Everywhere!

These days, HD quality video is no longer an option – it is essentially a requirement. On the other hand, there are still quite a few viewers out there that are unable to play high quality video, due to connection or device constraints. A simple way to fix this is by offering an HD toggle in your player. Viewers that want the full experience select the high quality option, while viewers that don’t have the capabilities (or interest) stick to the standard quality default.

With some smart encoding, creating such a setup is very easy. This post explains how to encode for and embed a player with an HD toggle that works on the desktop, as well as on the iPad, iPhone and Android devices.

HD video on Chrome, Firefox and iPhone

HD video on Chrome/Windows, the iPhone an Firefox/Mac.

Encoding

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.

HD version SD version
Container format MP4 MP4
Video format H.264, Main profile H.264, Main profile
Video dimensions 1280×720 pixels 640x360pixels
Video bitrate about 1800kbps about 800kbps
Audio format AAC, Low Complexity AAC, Low Complexity
Audio frequency 44.1 kHz, stereo 44.1 kHz, stereo
Audio bitrate 96 kbps 96 kbps

Embedding

With the two versions of our video encoded, let’s move on to embedding. Here is the code needed to have JW Player display both qualities of the video:

<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:

 

Now you’re all set! Glorious HD video, on every browser and device that matters.