Configuring Player Controls

Player controls such as a quality selector, playback rate, picture-in-picture, fullscreen control and vertical volume slider can be configured for a player.

To configure the Controls properties, follow these steps:

1. Open the Players module.
2. Click the player you want to configure.
3. Open the Controls accordion on the Overview tab.

The following controls can be configured:

• Seek Forward/Backward
• Playback Rates
• Fullscreen
• Vertical Volume Slider
• Thumbnail Seeking
• Picture-in-Picture
• Quality Selector

After any changes have been made, click Publish Changes for the changes to be visible in the published player.

Seek Forward/Backward

Enable Seek Forward and Seek Backward to add skip buttons to the control bar. These buttons allow viewers to jump forward or backward in the video.

Playback Rates

The Playback Rates control is enabled by default for all new players from version 7 onwards. This feature provides the ability to select a different playback rate manually. A playback rate icon will appear in the bottom right corner of the player.

Fullscreen

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.

Thumbnail Seeking

Select Thumbnail Seeking to display video thumbnails over the progress bar.

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.

You can turn off this functionality in Studio using the JSON Editor accordion on the Overview tab. To do this, add the configuration option "picture_in_picture_control": false,.

Quality Selector

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, the following label options are available for the rendition menu:

• 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