Custom drop-down lists on the toolbar


By default the PlayerJS has a main settings menu under the gear icon. However, you can move any of these settings to the toolbar as a separate dropdown list using custom element which can be either icon or text

Text element


To have a text as a list title, you need to add custom Text element first

Then you need to associate this element with the settings whose value will be displayed (quality, audio, subtitle or speed). To do this, you must specify in the Action field the number of this option from Settings window in the format settings#N

The settings#1 indicates that the element is connected to the first menu item. You also need to disable here the options Pause on click and Disable fullscreen mode

To make the drop-up list compact, you can disable the option Mark and enable the Don't show header

Try this template for example.

Graphic icon

You can also make a separate graphic icon that will open the menu and immediately show the desired list of options. For example, subtitles.

You need to create a custom element of type SVG and select the desired icon in the library. Then you need to specify in the Action / Command field a link to the desired section of the menu in the format settings#N. By default, subtitles are enabled in the third menu item:

In the same way, you can make a separate button for switching quality, speed, audio tracks, etc.


20.0.1
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