Configuring Player Controls
Player controls such as a quality selector, playback rate, fullscreen control and vertical volume slider can be configured for a player.
If you see a control that appears as shown here: it turns on picture-in-picture functionality. See the Picture-in-picture section later in this document for full information.
To configure the Controls properties, follow these steps:
- Click Players in the navigation header to open the Players module.
- Click the link for the player you want to configure.
- Click Controls in the left navigation menu.
The following controls can be configured:
- Quality Selector
- Playback Rates
- Vertical Volume Slider
- Thumbnail Seeking
- Skip to next video (playlist)
After any changes have been made, make sure to republish the player for the changes to be visible.
Enabling the Quality Selector provides the ability to manually select a different rendition as the video is playing. A gear icon will appear in the bottom right corner of the player.
When the Quality Selector is enabled, two options for the Quality Selector Label are enabled:
- Show Resolution (e.g., 720p) - Renditions will be
displayed by lines of horizontal resolution
When using this option, another parameter (
resolutionLabelBitrates) can be added to the Quality Selection plugin to also display the bitrates.
This must be done by editing the plugin parameters as there is currently no way to configure this option using the Players module UI. For more information, see the Quality Selection Plugin document.
- Show HD/SD - The player will look at the bitrate information for each rendition to determine whether it is SD or HD
Enabling Playback Rates provides the ability to manually select a different playback rate. A playback rate icon will appear in the bottom right corner of the player.
Select Fullscreen to enable the fullscreen control. The fullscreen control provides the ability to resize the player to fill the entire display. When the video starts playing, a fullscreen icon will appear in the bottom right corner of the player.
Vertical Volume Slider
Select Vertical Volume Slider to display the volume slider vertically.
Select Thumbnail Seeking to display video thumbnails over the progress bar.
Skip to next video (playlist)
Select Skip to next video (playlist) to enable the skip control. The skip control can be clicked to advance to the next video in the playlist.
Picture in picture
HTML5 picture in picture functionality is defined as: Allows websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.
An example of picture-in-picture is shown in the following two screenshots. This first screenshot shows a browser with a player displaying a video. Note the picture-in-picture button in the bottom-right of the player with the red arrow pointing towards it.
This next screenshot shows the result from clicking the picture-in-picture button. The player by default moves near the bottom-right of the screen (NOT the browser). The player can then be dragged wherever the viewer wishes to place it.
This functionality is turned on by default. Not all browsers support this picture-in-picture functionality. The following table details current support.
|Chrome||Supported in version 78+|
|Safari||Supported in version 13.1+|
|Firefox||Supported in version 13.1+|
|Edge||Supported in version 78+|
You can turn off this functionality in Studio using the JSON Editor option from the PLAYERS module. To do this add the configuration option
"picture_in_picture_control": false, as shown here: