HD Quality Toggling

This article explains how to add an HD quality toggle to your player embeds, allowing users to switch between multiple qualities of your videos. This technology works by swapping between two different static video files manually. For adaptive streaming, HLS or DASH would be the proper solution.

Introduction

JW Player automatically adds an HD button to its controls when it is setup with multiple qualities of a video file:

  • If there are 2 file qualities, the HD button acts as a toggle between the HD and SD qualities.
  • If there are 3 or more file qualities, the HD button will display a quality selection menu on rollover (like YouTube).
  • If there are 3 or more file qualities and the viewer is on a mobile device, JW Player will still toggle only between the first 2 qualities. This to keep the interface easy to use with Touch controls.

As a publisher, you can set which quality to use on startup. The first quality in the list is the default and should be the lower quality version of your file. Once a viewer clicks the HD button and overrides the quality, JW Player saves that in a cookie for subsequent videos.

Quality Toggle vs Multiple Sources

Quality selection syntax is the same as our multiple sources fallbacks, however the behavior differs based on the types of files used. Quality toggle will popuate when to of the same file types are used. For example, two MP4 files or two FLV files. If two dissimilar files are used (IE. MP4 with an FLV) fallback behavior will take over.

Example

Here is an example, which is using a 360p file and 720p file toggle:

 

Start the video to see the HD button in the controlbar. Click the HD button to toggle between the 360p and 720p versions of the video. Upon selection, the player will load and play the appropriate quality video at the appropriate time.

Embed code

<script>
var playerInstance = jwplayer("myElement");
playerInstance.setup({
      image: "/uploads/myPoster.jpg",
      sources: [{
        file: "/uploads/myVideo-360.mp4"
      },{
        file: "/uploads/myVideo-720.mp4"
      }]
    });
</script>

Instead of a single file configuration option, this embed has a sources options block. This block contains a list (array) of sources. Each source can contain the following properties:

file
URL to the video file, audio file, YouTube video or live stream of this playlist item source.
label
Label of the media source, displayed in the manual HD selection menu. Set this if you have more than 2 qualities of your video.
"default"
Set this to true for the media source you want to play on startup. If this isn't set for any source, the first one is used. Note the option should be placed in quotes because "default" is a reserved JavaScript keyword in IE8.
type
Media type of the source. Is only needed when the file property does not contain a recognized file extension (like .mp4 for mp4). The Media Formats Reference lists all supported types.

Quality Selection via Streaming

For HLS and DASH streaming on desktops (as well as RTMP for JW Player 7 only), JW Player automatically offers the HD selection menu. This is not set up through multiple qualities in the embed code, rather this uses a separate manifest file. See HLS Adaptive Streaming for more info.

Advanced Example

Here is a second, more advanced example that contains 3 sources, each with labels. The middle source is the default:

  var playerInstance = jwplayer("myElement");
  playerInstance.setup({
      image: "/uploads/myPoster.jpg",
      sources: [{
        file: "/uploads/myVideo720.mp4",
        label: "720p HD"
      },{
        file: "/uploads/myVideo360.mp4",
        label: "360p SD",
        "default": "true"
      },{
        file: "/uploads/myVideo180.mp4",
        label: "180p Web"
      }]
    });

Note that this same mechanism can also be used to display multiple media formats of a single video, like MP4+WebM or RTMP+MP4.

Multiple Qualities in RSS

Multiple qualities can also be setup in RSS feeds. This allows for HD toggling of playlists of videos. Here is a basic setup of a feed with 2 items with SD + HD qualities. Note the use of the JWPlayer namespace to set posters and thumbs:

<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
<channel>

  <item>
    <title>Sintel Trailer</title>
    <description>Sintel is a fantasy CGI movie from the Blender Open Movie Project.</description>
    <jwplayer:image>/assets/sintel.jpg</jwplayer:image>
    <jwplayer:source file="/assets/sintel-640.mp4" label="360p" />
    <jwplayer:source file="/assets/sintel-1280.mp4" label="720p HD" />
  </item>

  <item>
    <title>Elephants Dream Trailer</title>
    <description>This is the worlds first open movie, made entirely with Blender.</description>
    <jwplayer:image>/assets/elephants.jpg</jwplayer:image>
    <jwplayer:source file="/assets/elephants-640.mp4" label="360p" />
    <jwplayer:source file="/assets/elephants-1280.mp4" label="720p HD" />
  </item>

</channel>
</rss>

Note that RSS feeds are subject to cross-domain security restrictions and therefore won't automatically load from another domain than the player. See Crossdomain File Loading for more info.

See the Media Formats Reference for more information on RSS support.

Did you find this article helpful?

Please log in to rate this article.