Show or hide player controls

Customize FastPix Player to show or hide controls like play/pause, volume, captions, and fullscreen via CSS variables.

Customizing controls visibility in FastPix Player allows you to create a tailored user experience by selectively showing or hiding various player controls. This level of customization ensures that the player interface aligns with your specific design and functionality requirements.

Hiding specific controls

To hide specific controls within the player, you can use CSS variables. By setting the desired variables to none, you can remove certain elements from the player interface, simplifying the user experience or focusing attention on key functions.

Example CSS for hiding controls:

1
fastpix-player { 
2
    --audio-track-button: none; /* Hide audio track button */  
3
    --cc-button: none; /* Hide closed caption button */  
4
    --pip-button: none; /* Hide PiP mode button */  
5
    --resolution-selector: none; /* Hide quality selector */  
6
    --title: none; /* Hide title */  
7
    --progress-bar: none; /* Hide seek bar */  
8
    --initial-play-button: none; /* Hide initial play button */  
9
    --play-button-initialized: none; /* Hides or shows the play button after the player is initialized */  
10
    --playback-rate-button: none; /* Hide playback rate button */  
11
    --full-screen-button: none; /* Hide full-screen button */  
12
    --time-display: none; /* Hide time display */  
13
    --volume-control: none; /* Hide volume control */  
14
    --backward-skip-button: none; /* Hide backward skip button */  
15
    --forward-skip-button: none; /* Hide forward skip button */ 
16
    --loading-indicator: none; /* Hide loading indicator */  
17
} 

Description of controls

Each control can be shown or hidden using CSS variables, allowing for a fully customizable video player interface.

Hide control sections

The fastpix-player element allows you to customize and hide specific control sections to tailor the player’s interface to your needs. This flexibility lets you create a focused user experience by showing only the controls that are relevant to your application.

You can hide various control sections by setting specific attributes to none. Here are the controls you can customize:

Bottom right controls

These controls are located at the bottom right of the player interface. By default, they include buttons like full screen, settings, and other interactive elements.

• --bottom-right-controls: Hides the bottom right controls on the desktop version of the player.
• --bottom-right-controls-mobile: Hides the bottom right controls on the mobile version of the player.

Mobile middle controls

Controls which are positioned in the middle of the player interface on mobile devices, offering quick access to essential functions.

• --mobile-middle-controls: Hides the middle controls on the mobile version of the player.

Additional controls

Play button: The play button that appears after clicking the initial play button can be hidden using this attribute:

• --play-button-initialized: Hides the play button that appears after the initial play button is clicked.

Progress Bar: For the progress bar (seek bar), you can use this attribute:

• --progress-bar: Hides the progress bar in the player.

Example to hide control sections

Here is an example of how to implement these customizations:

1
fastpix-player {  
2
    --bottom-right-controls: none;  
3
    --bottom-right-controls-mobile: none;  
4
    --left-controls-bottom: none;  
5
    --left-controls-bottom-mobile: none;  
6
    --middle-controls-mobile: none;  
7
    --volume-control-mobile: none; 
8
    --play-button-initialized: none;  
9
    --progress-bar: none;  
10
} 

By customizing these controls, you can create a tailored user experience that aligns with your application’s needs. Hiding unnecessary controls helps reduce clutter and focuses the user’s attention on the most important features, enhancing the overall user experience.