Tag: encoding
HD Video Everywhere!
by Jeroen Wijering on August 24, 2011
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) select the low quality option.
With a combination of some thoughtful encoding and the HD plugin for JW Player, 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 Android, iPad and iPhone. We'll even discuss how to support HTML5 everywhere by including a WebM HD toggle.
HD video on Chrome/Windows, the iPhone an Firefox/Mac.
Encoding
First, we have to render two versions of our video: an HD one and a lower quality one. Since the iPad, the latest iPhones and Android flagships - like the HTC Desire and Samsung Galaxy S - all play 720p video, let's use that as the HD version. Full HD (1080p) is still a bit overkill, in my opinion.
For the lower 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, 270p 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 details on the encoding side, check a previous blog post about supporting mobile video on your site.
| HD version | SD version | |
| Container format | MP4 | MP4 |
| Video format | H.264, Main profile | H.264, Baseline profile |
| Video dimensions | 1280x720 pixels | 480x270pixels |
| Video bitrate | about 2000kbps | about 500kbps |
| Audio format | AAC, Low Complexity | AAC, Low Complexity |
| Audio frequency | 44.1 kHz, stereo | 44.1 kHz, stereo |
| Audio bitrate | 96 kbps | 64 kbps |
Embedding
With the two versions of our video encoded, let's move on to embedding. In addition to the two MP4 files, you must also upload jwplayer.min.js and player.swf (available on the JW Player download page), as well as a nice still image (JPG) from your video. Note: we recommended the JPG as the video image - just for good looks. Next, include the player in the <head> of your HTML page:
<script type="text/javascript" src="http://example.com/jwplayer/jwplayer.min.js"></script>
With the player included, move on to place the actual embed code:
<div id="container">HD video coming up!</div>
<script>
var options = {
file: "/assets/video-270p.mp4",
height: 270,
modes: [
{ type: "html5" },
{ type: "flash", "src:/jwplayer/player.swf" }
],
plugins: {
hd: { file: "/assets/video-720p.mp4" }
},
width: 480
};
jwplayer("container").setup(options);
</script>
With this setup, the player is setup into the <div> when the page loads. The 270p video is loaded into the player by default. The HD plugin is used to offer a toggle to the 720p video. This toggle is:
- Displayed as a button in the top-right of the video on desktop browsers. Viewers can click the button to enable and disable the HD version.
- Displayed as two big buttons in the middle of the video on Android and iOS. On their small touch screens, viewers can easily see and click these buttons.
WebM Support
Note the modes block in the above embed code define which playback mode is used first: Flash or HTML5. In this case, HTML5 is used first, because it enables the video to resume after doing an HD toggle. When clicking the HD toggle in Flash, the video will re-play from the beginning.
Unfortunately, not all HTML5 browsers (Firefox / Chrome † ) support the MP4 files we use. The player will therefore fallback to Flash. In order to profit from HTML5 playback in these browsers too, you should do two additional WebM encodes of your original video. You can use the same dimensions and bitrates as for an MP4.
On the embedding side, we add one small check. In between defining the options and setting up the player, we sniff if the browser is able to play WebM video. If so, we swap out the MP4 files for WebM ones:
...
width: 480
};
if(!!document.createElement('video').canPlayType('video/webm')) {
options.file = '/assets/video-270p.webm';
options.plugins.hd.file = '/assets/video-720p.webm';
}
jwplayer("container").setup(options);
</script>
Now you're all set! Glorious HD video in HTML5 mode, on every browser and device that matters. Check out the live example:
example
† Though Chrome announced they would drop MP4 support last year, it is still working in the current version (Chrome 14).