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/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 versionSD versionContainer formatMP4MP4Video formatH.264, Main profileH.264, Main profileVideo dimensions1280×720 pixels640x360pixelsVideo bitrateabout 1800kbpsabout 800kbpsAudio formatAAC, Low ComplexityAAC, Low ComplexityAudio frequency44.1 kHz, stereo44.1 kHz, stereoAudio bitrate96 kbps96 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:
HD video coming up!
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.