JWPlayer支持SD/HD

　　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

 

 

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