Quality selector


To allow users to switch between different quality options you can either switch between different files or use HLS and DASH where different options are included in the same manifest.

To switch between files, you must specify a set of links in the file parameter

[Low]source1,[Middle]source2,[High]source3
Example
new Playerjs({
  "id":"player",
  "file":"[480p]//site.com/video480.mp4,[720p]//site.com/video720.mp4"
});
You can pass the names of the quality options separately by the qualities parameter
"file":"//site.com/video480.mp4,//site.com/video720.mp4","qualities":"480p,720p"

HLS, DASH and YouTube

HLS and DASH technologies can contain various quality and audio tracks options within one manifest (m3u8 or mpd). By default, the player uses this option and takes this options from the manifest (except iOS, where HLS playback works natively and the player doesn't see the quality options inside the manifest at all).

The player names the quality options based on the settings. By default, approximate video resolution is used (for example, 480p, 720p, 1080p). If there are two identical names, the player will automatically add a bitrate (for example, 1000kbps) - you can select this option separately. Also in the settings you can choose the epithet (Low, High, HD, etc.).

If you want to switch between different manifests, then you need to disable the HLS (DASH) / Select qualities (audio) from the manifest in the PRO version and specify a list of options in the file parameter

file:"[Low]//site.com/low.m3u8,[High]//site.com/high.m3u8" 

Default quality

The parameter default_quality allows you to enable the desired quality.

new Playerjs({
  "id":"player",
  "file":"[480p]//site.com/video480.mp4,[720p]//site.com/video720.mp4",
  "default_quality":"720p"
});
new Playerjs({
  "id":"player",
  "file":"//site.com/video.m3u8",
  "default_quality":"Low"
});

Since version 10, you can also specify the default quality option by count number num:X, if there are variants with the same names. Numbering starts from zero and also includes group separators:

"default_quality":"num:2"

You can also specify the maximum quality value (the last one in the list) by default from version 12.4:

"default_quality":"max"

If you have quality memory enabled, it takes precedence and the default_quality option will not work.

Groups

You can use inactive elements in the list of quality options to divide options into groups. This separator must be indicated by three characters <<< at the beginning of the name.

"file":"[480p]link,[720p]link,[<<<First section],[480p]link,[720p]link,[<<<Second section]"

You can also use HTML formatting:

[<<<<div style='border-bottom:1px solid #fff;'>Group</div>]

How to prohibit certain quality options

You can use parameter forbidden_quality to forbid certain quality options. Just indicate names through a comma. Prohibited options will not be displayed in the menu, but may be available for the adaptive mode Auto of HLS or DASH (you can solve it by turning off the quality memory, adding Auto to the forbidden list and indicating the available quality option with the default_quality).

new Playerjs({
  "id":"player",
  "file":"[480p]//site.com/video.m3u8",
  "forbidden_quality":"720p,1080p,Auto",
  "default_quality":"480p"
});

20.0.5
2024 © PlayerJS

Sign up

Sign up
By signing up, you agree to Terms of Service
Login if you have an account

Restore password

Restore
Forgot email? Contact us