Show or hide controls
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:
fastpix-player {
--audio-track-button: none; /* Hide audio track button */
--cc-button: none; /* Hide closed caption button */
--pip-button: none; /* Hide PiP mode button */
--resolution-selector: none; /* Hide quality selector */
--title: none; /* Hide title */
--progress-bar: none; /* Hide seek bar */
--initial-play-button: none; /* Hide initial play button */
--play-button-initialized: none; /* Hides or shows the play button after the player is initialized */
--playback-rate-button: none; /* Hide playback rate button */
--full-screen-button: none; /* Hide full-screen button */
--time-display: none; /* Hide time display */
--volume-control: none; /* Hide volume control */
--backward-skip-button: none; /* Hide backward skip button */
--forward-skip-button: none; /* Hide forward skip button */
--loading-indicator: none; /* Hide loading indicator */
}
Description of controls
Feature variable | Description |
---|---|
--audio-track-button | Lets users switch between available audio tracks. |
--cc-button | Toggles subtitles or closed captions for the video. |
--pip-button | Enables Picture-in-Picture mode to watch video in a small, resizable window. |
--resolution-selector | Allows users to select video quality options (e.g., 720p, 1080p). |
--loading-indicator | Displays a visual cue to indicate that the video is buffering or loading. |
--title | Displays the title of the current video. |
--progress-bar | Allows users to navigate to different parts of the video. |
--initial-play-button | The play button shown before the video starts. |
--play-button-initialized | The standard play/pause toggle during video playback. |
--playback-rate-button | Allows users to adjust the video speed (e.g., 1x, 1.5x, 2x). |
--full-screen-button | Toggles full-screen mode for a larger viewing experience. |
--time-display | Shows the current playback time and total duration of the video. |
--volume-control | Lets users adjust the volume level. |
--backward-skip-button | Skips backward by a preset number of seconds. |
--forward-skip-button | Skips forward by a preset number of seconds. |
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:
fastpix-player {
--bottom-right-controls: none;
--bottom-right-controls-mobile: none;
--left-controls-bottom: none;
--left-controls-bottom-mobile: none;
--middle-controls-mobile: none;
--volume-control-mobile: none;
--play-button-initialized: none;
--progress-bar: none;
}
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.
Updated 17 days ago