support Contact Support | system status System Status
Page Contents

    Configuring Player Controls

    In this topic you will learn how to configure the controls for a player.

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

    style menu

    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:

    1. Click Players in the navigation header to open the Players module.
    2. Click the link for the player you want to configure.
    3. Click Controls in the left navigation menu.
    style menu

    The following controls can be configured:

    After any changes have been made, make sure to republish the player for the changes to be visible.

    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, 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

    Playback Rates

    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.

    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.

    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.

    p-in-p nirnak

    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.

    Browser 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:


    Page last updated on 21 May 2020