Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

AddOns

HD Plugin Guide

Purpose

The purpose of this guide is to give you a feature overview of the JW Player HD Plugin.

Introduction

The HD plugin for the JW Player gives your viewers a way to toggle between a high definition and standard definition version of your videos. It works in both Flash and HTML5. The HD toggle is displayed in the dock:

HD Example Player

The plugin stores the viewer’s quality preference in a cookie, so they use a consistent video quality between different videos on a site. It supports playlists, YouTube and HTTP/RTMP streaming.

Configuration Options

The HD plugin supports the following configuration options:

hd.file ( undefined )
Location of the high definition file to play, e.g. http://example.com/hd-video.mp4.
hd.state ( false )
The default video quality to use for playback. When set true the player will start out with the HD version. Whenever a users toggles the HD quality, his setting is stored in a cookie. The cookie overrides the default state
hd.fullscreen ( false )
When set true, the player will automatically switch to the HD video file when a user enters fullscreen. The plugin does not enforce the HD quality in fullscreen, nor will it toggle down when exiting fullscreen. This option only works on desktop browsers.

Note that, when using Flash and progressively downloaded video files, playback will restart from the beginning when entering fullscreen.

Example

Here is a basic example of the plugin, setting just an hd.file:

<div id='player'>Get Flash to see the video</div>
<script type="text/javascript>
  jwplayer('player').setup({
    file: '/assets/standard.mp4',
    flashplayer: '/assets/player.swf',
    plugins: {
      'hd-2': {
        file: '/assets/highdef.mp4'
      }
    }
  });
</script>

This example uses the - preferred - JW Embedder method. Please see our Supported Embed Methods guide for other options like SWFObject.

Playlist Support

HD versions can be assigned to one or more videos in a playlist. The functionality is available for both inline and RSS playlists. Instead of setting the HD file URLs in the plugin configuration, they are set in the playlist.

Since the RSS playlist formats define elements for linking to HD files, the captions should be set using the JWPlayer XML namespace. In practice, the namespace is enabled by:

Example

The config solely needs a reference to the HD plugin:

<div id='player'>Get Flash to see the video</div>
<script type="text/javascript>
  jwplayer('player').setup({
    flashplayer: '/assets/player.swf',
    playlistfile: '/assets/playlist.xml',
    plugins: {
      'hd-2': {}
    }
  });
</script>

In the playlist.xml, the jwplayer:hd.file element defines the HD quality video for each entry:

<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/">
  <channel>
    <item>
      <title>My first video</title>
      <description>This one starts the playlist.</description>
      <jwplayer:file>sd-video.mp4</jwplayer:file>
      <jwplayer:hd.file>hd-video.mp4</jwplayer:hd.file>
    </item>

    <item>
      <title>My second video</title>
      <description>This one concludes it all.</description>
      <jwplayer:file>sd-video-2.mp4</jwplayer:file>
      <jwplayer:hd.file>hd-video-2.mp4</jwplayer:hd.file>
    </item>

  </channel>
</rss>

Note the xmlns:jwplayer at the top! It is needed to validate the jwplayer:hd.file elements.

Device Support

On touch devices (iPhone, iPad, Android), the HD plugin does not display an HD toggle. This because:

Instead, we strongly encourage you to look into the HTTP Live Streaming capabilities of iOS. This straightforward streaming protocol ensures an optimal video quality on iPhones and iPads.

Streaming Support

We recommend using the HD plugin if you are using HTML5/Flash with progressively downloaded videos or if you are using an HTTP/RTMP server without adaptive/dynamic streaming capabilities. Here's the exact behavior when using the various streaming protocols:

Youtube Support

Version 5.6 of the JW Player introduced improved YouTube support, amongst which the setting of the quality level for a video. The HD plugin leverages this feature. The plugin will detect if a video comes from YouTube, and offer a toggle if at least the hd720 quality level is available. At that point, the toggle allows switching between the hd720 and the and medium quality levels.

If a YouTube video is not available in at least hd720, the HD icon will get greyed out.

Example

Here is an example using YouTube. Note the hd.file option is not needed:

<div id='player'>Get Flash to see the video</div>
<script type="text/javascript>
  jwplayer('player').setup({
    file: 'XSGBVzeBUbk',
    flashplayer: '/assets/player.swf',
    plugins: {
      'hd-2': {}
    },
    provider: 'youtube'
  });
</script>

Changelog

Version 2.0

Version 2.1

Version 2.2