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 – This is now auto-detected and the div.jw-plugins
block with a specific div.jw-plugin
that has it’s data-type
set to hd-2
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: