Show or hide player controls

Customizing control visibility in fp-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 controls

To hide specific controls within the fp-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:

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

• Audio Track Button (--audio-track-button)
  Lets users switch between available audio tracks.
  
  
• Closed Caption Button (--cc-button)
  Toggles subtitles or closed captions for the video.
  
  
• Picture-in-Picture (PiP) Button (--pip-button)
  Enables PiP mode for watching the video in a small, resizable window.
  
  
• Resolution Selector (--resolution-selector)
  Allows users to select video quality options (e.g., 720p, 1080p).
  
  
• Loading Indicator(--loading-indicator)
  Displays a visual cue (e.g., a spinning icon or progress animation) to indicate that the video is buffering or loading.
  
  
• Title (--title)
  Displays the title of the current video.
  
  
• Progress Bar (--progress-bar)
  Allows users to navigate to different parts of the video.
  
  
• Initial Play Button (--initial-play-button)
  The play button shown before the video starts.
  
  
• Play Button After Initialization (--play-button-initialized)
  The standard play/pause toggle during video playback.
  
  
• Playback Rate Button (--playback-rate-button)
  Allows users to adjust the video speed (e.g., 1x, 1.5x, 2x).
  
  
• Full-Screen Button (--full-screen-button)
  Toggles full-screen mode for a larger viewing experience.
  
  
• Time Display (--time-display)
  Shows the current playback time and total duration of the video.
  
  
• Volume Control (--volume-control)
  Let's users adjust the volume level.
  
  
• Backward Skip Button (--backward-skip-button)
  Skips backward by a preset number of seconds.
  
  
• Forward Skip Button (--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.