Center Controls Group

Bottom Controls Group ``` -------------------------------- ### onHlsManifestLoading Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme Fired to signal that manifest loading is starting. ```typescript (data: ManifestLoadingData, nativeEvent: HLSManifestLoadingEvent) => void ``` -------------------------------- ### onLoadStart callback Source: https://vidstack.io/docs/player/components/core/player?styling=css Fired when the browser has started to load a resource. ```typescript (nativeEvent: MediaLoadStartEvent) => void ``` -------------------------------- ### onHlsAudioTrackLoading Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme Fired when loading an audio track starts. ```APIDOC ## onHlsAudioTrackLoading ### Description Fired when loading an audio track starts. ### Callback Signature (data: TrackLoadingData, nativeEvent: HLSAudioTrackLoadingEvent) => void ``` -------------------------------- ### onHlsLevelLoading Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme Callback fired when a level playlist loading starts. ```APIDOC ## onHlsLevelLoading ### Description Fired when a level playlist loading starts. ### Callback Signature (data: LevelLoadingData, nativeEvent: HLSLevelLoadingEvent) => void ### Parameters - **data** (LevelLoadingData) - Required - Event data. - **nativeEvent** (HLSLevelLoadingEvent) - Required - Native hls.js event object. ``` -------------------------------- ### Use Media Icons Source: https://vidstack.io/docs/player/getting-started/installation/react?provider=video&styling=plyr-layout Example of rendering a media icon component. ```jsx ``` -------------------------------- ### onProviderSetup Source: https://vidstack.io/docs/player/components/core/player?styling=css Callback fired immediately after the provider has been set up. Receives an adapter and the native event. ```APIDOC ## onProviderSetup ### Description Fired immediately after the provider has been set up. Do not try and configure the provider here as it'll be too late - prefer the `provider-change` event. ### Signature (adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void ### Parameters - **adapter** (MediaProviderAdapter) - The provider adapter. - **nativeEvent** (MediaProviderSetupEvent) - The native event object. ``` -------------------------------- ### Getting player instance with useMediaPlayer Source: https://vidstack.io/docs/player/core-concepts/state-management?styling=css Shows how to get a player instance reference with useMediaPlayer inside a player child component, and then subscribe to state updates similarly to the previous example. ```tsx import { useEffect } from 'react'; import { useMediaPlayer } from '@vidstack/react'; // This component is a child of `` function PlayerChildComponent() { const player = useMediaPlayer(); useEffect(() => { if (!player) return; // Same as example above here. }, [player]); } ``` -------------------------------- ### onProviderSetup Source: https://vidstack.io/docs/player/components/core/player Fired immediately after the provider has been set up. Do not try and configure the provider here as it'll be too late - prefer the provider-change event. ```APIDOC ## onProviderSetup ### Description Fired immediately after the provider has been set up. Do not try and configure the provider here as it'll be too late - prefer the provider-change event. ### Callback Signature (adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void ### Parameters - **adapter** (MediaProviderAdapter) - Required - The provider adapter that was set up. - **nativeEvent** (MediaProviderSetupEvent) - Required - The native event object. ``` -------------------------------- ### useVideoQualityOptions hook example Source: https://vidstack.io/docs/player/api/hooks/use-video-quality-options?styling=default-theme Use this hook to get video quality options and render a quality submenu. The example shows how to display the current quality as a hint, handle auto option, and map options to menu radio items. ```tsx import { Menu, useVideoQualityOptions } from '@vidstack/react'; function VideoQualitySubmenu() { const options = useVideoQualityOptions({ auto: true, sort: 'descending' }), currentQualityHeight = options.selectedQuality?.height, hint = options.selectedValue !== 'auto' && currentQualityHeight ? `${currentQualityHeight}p` : `Auto${currentQualityHeight ? ` (${currentQualityHeight}p)` : ''}`; return ( Quality ({hint}) {options.map(({ quality, label, value, bitrateText, select }) => ( {label} ))} ); } ``` -------------------------------- ### startLoading method Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Dispatch a media-start-loading event to start the media loading process. Only works if the player has a custom media loading strategy. ```javascript remote.startLoading(triggerEvent); ``` -------------------------------- ### useTextCues with useActiveTextTrack Source: https://vidstack.io/docs/player/api/hooks/use-text-cues?styling=css Use this hook to observe cues on a text track. The example gets the active 'chapters' track and returns VTTCue[] objects. ```typescript import { useActiveTextTrack, useTextCues } from '@vidstack/react'; const track = useActiveTextTrack('chapters'), // Returns `VTTCue[]` objects. cues = useTextCues(track); ``` -------------------------------- ### Access hls.js instance Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme Get a reference to the hls.js instance in the provider setup event. Use provider.instance to access the instance and provider.ctor for the constructor. ```tsx import { isHLSProvider, type MediaProviderAdapter, type MediaProviderSetupEvent, } from '@vidstack/react'; function onProviderSetup(provider: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) { if (isHLSProvider(provider)) { provider.ctor; // `hls.js` constructor provider.instance; // `hls.js` instance } } ``` -------------------------------- ### startLoading Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Dispatches a media-start-loading event to start the media loading process. This will only work if the media player has been initialized with a custom media loading strategy. ```APIDOC ## startLoading ### Description Dispatch a `media-start-loading` event to start the media loading process. This will only work if the media player has been initialized with a custom media loading strategy. ### Method startLoading ### Parameters - **triggerEvent** (Event) - Optional - The event that triggered the loading request. ### Example ``` remote.startLoading(triggerEvent); ``` ``` -------------------------------- ### useAudioGainOptions hook example Source: https://vidstack.io/docs/player/api/hooks/use-audio-gain-options?styling=default-theme Use this hook to get audio gain options and render them in a menu. The options object provides a disabled flag, a selectedValue, and an array of options with label, value, and select function. The example shows a submenu with a radio group for selecting an audio boost level. ```tsx import { Menu, useAudioGainOptions } from '@vidstack/react'; function AudioGainSubmenu() { const options = useAudioGainOptions(); return ( Audio Boost {options.map(({ label, value, select }) => ( {label} ))} ); } ``` -------------------------------- ### Implement Captions Submenu in React Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme This example demonstrates how to create a captions submenu using Menu.Root, Menu.Content, and Menu.RadioGroup. It utilizes the useCaptionOptions hook to manage track selection and requires the Icons component setup. ```tsx import { type ReactElement } from 'react'; import { Menu, useCaptionOptions } from '@vidstack/react'; // See "Icons" component page for setup before importing the following: import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClosedCaptionsIcon, } from '@vidstack/react/icons'; function CaptionsSubmenu() { const options = useCaptionOptions(), hint = options.selectedTrack?.label ?? 'Off'; return ( {options.map(({ label, value, select }) => ( {label} ))} ); } interface SubmenuButtonProps { label: string; hint: string; disabled?: boolean; icon: ReactElement; } function SubmenuButton({ label, hint, icon: Icon, disabled }: SubmenuButtonProps) { return ( {label} {hint} ); } ``` -------------------------------- ### startLoadingPoster method Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Dispatch a media-start-loading-poster event to start the poster image loading process. Only works if the player has a custom poster loading strategy. ```javascript remote.startLoadingPoster(triggerEvent); ``` -------------------------------- ### useAudioOptions hook usage in React Source: https://vidstack.io/docs/player/api/hooks/use-audio-options?styling=default-theme Use this hook to get the current audio track options. The example builds an audio submenu with a radio group, disabling the button when no options are available and showing the selected track label as a hint. ```tsx import { Menu, useAudioOptions } from '@vidstack/react'; function AudioSubmenu() { const options = useAudioOptions(), hint = options.selectedTrack?.label; return ( Audio ({hint}) {options.map(({ label, value, select }) => ( {label} ))} ); } ``` -------------------------------- ### onMediaStartLoading Source: https://vidstack.io/docs/player/components/core/player?styling=css Callback fired when requesting media to begin loading. This will only take effect if the load strategy on the player is set to custom. ```APIDOC ## onMediaStartLoading ### Description Fired when requesting media to begin loading. This will only take effect if the load strategy on the player is set to custom. ### Callback Signature (nativeEvent: MediaStartLoadingRequestEvent) => void ### Parameters - **nativeEvent** (MediaStartLoadingRequestEvent) - Required - The native event object. ``` -------------------------------- ### onMediaPosterStartLoading Source: https://vidstack.io/docs/player/components/core/player?styling=css Callback fired when requesting the media poster to begin loading. This will only take effect if the posterLoad strategy on the player is set to custom. ```APIDOC ## onMediaPosterStartLoading ### Description Fired when requesting the media poster to begin loading. This will only take effect if the posterLoad strategy on the player is set to custom. ### Callback Signature (nativeEvent: MediaPosterStartLoadingRequestEvent) => void ### Parameters - **nativeEvent** (MediaPosterStartLoadingRequestEvent) - Required - The native event object. ``` -------------------------------- ### TimeSlider.ChapterTitle usage example Source: https://vidstack.io/docs/player/components/sliders/time-slider?styling=default-theme Example of using TimeSlider.ChapterTitle inside a TimeSlider.Preview. ```tsx ``` -------------------------------- ### startLoading Source: https://vidstack.io/docs/player/components/core/player?styling=css Called when media can begin loading. Calling this method will trigger the initial provider loading process. Calling it more than once has no effect. ```APIDOC ## startLoading ### Description Called when media can begin loading. Calling this method will trigger the initial provider loading process. Calling it more than once has no effect. ### Method method ### Signature (trigger?: Event) => void ### Parameters - **trigger** (Event) - Optional - The event that triggered the call. ### Returns void ``` -------------------------------- ### onMediaStartLoading Source: https://vidstack.io/docs/player/components/core/player Fired when requesting media to begin loading. This will only take effect if the `load` strategy on the player is set to `custom`. ```APIDOC ## onMediaStartLoading ### Description Fired when requesting media to begin loading. This will only take effect if the `load` strategy on the player is set to `custom`. ### Callback Signature ``` (nativeEvent: MediaStartLoadingRequestEvent) => void ``` ### Parameters - **nativeEvent** (MediaStartLoadingRequestEvent) - Required - The native event object. ``` -------------------------------- ### onMediaPosterStartLoading Source: https://vidstack.io/docs/player/components/core/player Fired when requesting the media poster to begin loading. This will only take effect if the `posterLoad` strategy on the player is set to `custom`. ```APIDOC ## onMediaPosterStartLoading ### Description Fired when requesting the media poster to begin loading. This will only take effect if the `posterLoad` strategy on the player is set to `custom`. ### Callback Signature ``` (nativeEvent: MediaPosterStartLoadingRequestEvent) => void ``` ### Parameters - **nativeEvent** (MediaPosterStartLoadingRequestEvent) - Required - The native event object. ``` -------------------------------- ### onHlsLibLoadStart Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme Fired when the browser begins downloading the hls.js library. ```typescript (nativeEvent: HLSLibLoadStartEvent) => void ``` -------------------------------- ### AudioGainSlider.Thumb component setup Source: https://vidstack.io/docs/player/components/sliders/audio-gain-slider?styling=default-theme Importing and defining the Thumb component and its props. ```typescript import { AudioGainSlider } from "@vidstack/react"; const Component = AudioGainSlider.Thumb; type Props = AudioGainSlider.ThumbProps; ``` ```jsx ``` -------------------------------- ### JSON Images Example Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css Example structure for a JSON file containing an array of image objects. ```json [ { "startTime": 0, "endTime": 5, "url": "/media/thumbnail-1.jpg" }, { "startTime": 5, "endTime": 10, "url": "/media/thumbnail-2.jpg" } ] ``` -------------------------------- ### React Menu with media- classes (example.tsx) Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme React JSX example using Menu.Root, Menu.Button, and Menu.Items with media- prefixed classes. Requires importing Menu from '@vidstack/react' and SettingsIcon from '@vidstack/react/icons'. ```tsx import { Menu } from '@vidstack/react'; // See "Icons" component page for setup before importing the following: import { SettingsIcon } from '@vidstack/react/icons'; {/* Menu Items + Submenus */} ``` -------------------------------- ### onDashLibLoadStart Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme Fired when the browser begins downloading the dash.js library. ```APIDOC ## onDashLibLoadStart ### Description Fired when the browser begins downloading the dash.js library. ### Signature (nativeEvent: DASHLibLoadStartEvent) => void ``` -------------------------------- ### Slider.Steps Usage Example Source: https://vidstack.io/docs/player/components/sliders/slider?styling=default-theme Example of implementing Slider.Steps within a Slider.Root component using a render function. ```jsx {(step) =>

} ``` -------------------------------- ### Example JSON Cues Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css A simple JSON file structure for defining media cues. ```json [ { "startTime": 0, "endTime": 5, "text": "Cue One!" }, { "startTime": 5, "endTime": 10, "text": "Cue Two!" } ] ``` -------------------------------- ### Example CSS for media-chapter-title Source: https://vidstack.io/docs/player/components/display/chapter-title Example CSS for styling the chapter title with a bullet separator and ellipsis overflow. ```css .media-chapter-title { display: inline-block; font-size: 14px; font-weight: 500; font-family: sans-serif; color: rgba(255 255 255 / 0.64); flex: 1 1 0%; padding-inline: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .media-chapter-title::before { content: '\2022'; display: inline-block; margin-right: 6px; color: rgba(255 255 255 / 0.64); } .media-chapter-title:empty::before { content: ''; margin-left: 0; } ``` -------------------------------- ### onProviderSetup callback Source: https://vidstack.io/docs/player/components/core/player?styling=css Fired immediately after the provider has been set up. ```typescript (adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void ``` -------------------------------- ### Access dashjs Instance Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme Obtain a reference to the dashjs instance via the provider setup event. ```APIDOC ## Access dashjs Instance ### Description Obtain a reference to the dashjs instance via the provider setup event. ### Usage ```tsx import { isDASHProvider, type MediaProviderAdapter, type MediaProviderSetupEvent, } from '@vidstack/react'; function onProviderSetup(provider: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) { if (isDASHProvider(provider)) { provider.ctor; // `dashjs` constructor provider.instance; // `dashjs` instance } } ``` ``` -------------------------------- ### Data attribute CSS example Source: https://vidstack.io/docs/player/components/buttons/caption-button Example CSS selector for styling the component using data attributes. ```css /* Example. */ .component[data-foo] {} ``` -------------------------------- ### Install Vidstack Packages (Terminal) Source: https://vidstack.io/docs/player/getting-started/installation/react?provider=video&styling=default-layout Run this command in your terminal to install the required Vidstack packages for React. ```terminal ``` ``` ``` -------------------------------- ### startLoadingPoster Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Dispatches a media-start-loading-poster event to start the poster image loading process. This will only work if the media player has been initialized with a custom poster loading strategy. ```APIDOC ## startLoadingPoster ### Description Dispatch a `media-start-loading-poster` event to start the poster image loading process. This will only work if the media player has been initialized with a custom poster loading strategy. ### Method startLoadingPoster ### Parameters - **triggerEvent** (Event) - Optional - The event that triggered the loading request. ### Example ``` remote.startLoadingPoster(triggerEvent); ``` ``` -------------------------------- ### Tracking media state via hooks Source: https://vidstack.io/docs/player/core-concepts/state-management?styling=css Shows two hook-based approaches: useMediaState for a single piece of state (cheaper/faster) and useMediaStore for a live subscription to all media state. Both require a ref to the player instance. ```tsx import { useRef } from 'react'; import { MediaPlayer, useMediaState, useMediaStore, type MediaPlayerInstance, } from '@vidstack/react'; function Player() { const player = useRef(null); // ~~ Option 1 // - This hook is simpler when accessing a single piece of state. // - This hook is much cheaper/faster than `useMediaStore`. const paused = useMediaState('paused', player); // ~~ Option 2 // - This hook creates a live subscription to the media paused state. // - All state subscriptions are lazily created on prop access. // - This hook makes it easy to access all media state. const { paused } = useMediaStore(player); return {/* ... */}; } ``` -------------------------------- ### TimeSlider.Chapters usage example Source: https://vidstack.io/docs/player/components/sliders/time-slider?styling=default-theme Example of using TimeSlider.Chapters to render chapter cues with track, track fill, and progress. ```tsx {(cues, forwardRef) => cues.map((cue) => (

))} ``` -------------------------------- ### Create VS Code settings file Source: https://vidstack.io/docs/player/getting-started/installation/angular Run this command in your project root to create the .vscode/settings.json file. ```bash touch .vscode/settings.json ``` -------------------------------- ### Import useMediaRemote and get MediaRemoteControl instance Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Import the useMediaRemote hook from @vidstack/react and call it to get a MediaRemoteControl instance. ```javascript import { useMediaRemote } from '@vidstack/react'; // Returns a `MediaRemoteControl` class instance. const remote = useMediaRemote(); ``` -------------------------------- ### onMediaClipStartChangeRequest Source: https://vidstack.io/docs/player/components/core/player?styling=default-theme Fired when requesting to change the clip start time. The event `detail` specifies the new start time in seconds. ```APIDOC ## onMediaClipStartChangeRequest ### Description Fired when requesting to change the clip start time. The event `detail` specifies the new start time in seconds. ### Callback Signature (detail: number, nativeEvent: MediaClipStartChangeRequestEvent) => void ### Parameters - **detail** (number) - The new clip start time in seconds. - **nativeEvent** (MediaClipStartChangeRequestEvent) - The native media event. ``` -------------------------------- ### Menu Portal Component Setup Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme Importing and defining the Menu.Portal component and its props. ```typescript import { Menu } from "@vidstack/react"; const Component = Menu.Portal; type Props = Menu.PortalProps; ``` -------------------------------- ### Tailwind CSS media variant example Source: https://vidstack.io/docs/player/styling/tailwind?styling=default-theme Use the media-paused variant to apply styles when playback is paused. The example shows a div that becomes transparent when the media is paused. ```jsx

```