Setting up multiple quality levels is as simple as providing additional sources for each file type, and including data-bitrate and/or data-width parameters for each.

Additionally for JW5 we need to specify a plugin that that will be used to switch between the different quality levels. This is done by including the div.jw-plugins block with a specific div.jw-plugin that has it’s data-type set to hd-2 – This is now auto-detected and the hd-2 plugin is added dynamically.

<div class="jw-settings" id="my_simple_settings">
     <video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
          <source src="/videos/mp4/big-buck-bunny-360.mp4" type="video/mp4" data-bitrate="555" data-width="360" />
          <source src="/videos/mp4/big-buck-bunny-540.mp4" type="video/mp4" data-bitrate="777" data-width="540" />
          <source src="/videos/mp4/big-buck-bunny-720.mp4" type="video/mp4" data-bitrate="999" data-width="720" />
     </video>
     <div class="jw-modes">
          <div class="jw-mode" data-type="html5"></div>
          <div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
     </div>
     <div class="jw-plugins">
          <div class="jw-plugin" data-type="hd-2"></div>
     </div>
</div>


In JW5 only the lowest and highest bitrate/width combinations will be used to provide switching between SD and HD

Adding the above code to your page results in the following JW Player video with two-state quality switching:

There are a couple of scenarios where you may wish to define multiple quality levels for a source, but not have JW HTML Config automatically load the HD plugin:

• You wish to use an either RTMP or HTTP bitrate switching;
• You wish to use an alternate HD solution

In these situations it is simple to override the JW HTML Config behaviour by including the div.jw-plugins block with a specific div.jw-plugin that has it’s data-type set to hd-2, but with the additional data-disabled attribute set to true:

<div class="jw-settings" id="my_simple_settings">
     <video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
          <source src="/videos/mp4/big-buck-bunny-360.mp4" type="video/mp4" data-bitrate="555" data-width="360" />
          <source src="/videos/mp4/big-buck-bunny-540.mp4" type="video/mp4" data-bitrate="777" data-width="540" />
          <source src="/videos/mp4/big-buck-bunny-720.mp4" type="video/mp4" data-bitrate="999" data-width="720" />
     </video>
     <div class="jw-modes">
          <div class="jw-mode" data-type="html5"></div>
          <div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
     </div>
     <div class="jw-plugins">
          <div class="jw-plugin" data-type="hd-2" data-disabled="true"></div>
     </div>
</div>


This results in the following: