``` -------------------------------- ### Customizable HTML Example Source: https://vidstack.io/docs/wc/player/components/buttons/airplay-button?styling=default-theme Example of an AirPlay button using the customizable CSS variables. This demonstrates how to apply custom styles via CSS classes and variables. ```html

``` -------------------------------- ### Tooltip Default Theme Example Source: https://vidstack.io/docs/player/components/buttons/tooltip?styling=default-theme Example of how to implement the Tooltip component with default theme styling. This includes setting up the Root, Trigger, and Content with appropriate class names for animation and positioning. ```tsx import { Tooltip } from '@vidstack/react'; {/* Button */} {/* Content */} ``` -------------------------------- ### Toggle Button Instance Reference Source: https://vidstack.io/docs/wc/player/components/buttons/toggle-button?styling=default-theme Example of how to get a reference to a toggle button element in the DOM. ```javascript // Get element reference to call props/methods. const instance = document.querySelector("media-toggle-button"); ``` -------------------------------- ### Basic Media Player Setup with Provider Source: https://vidstack.io/docs/wc/player/components/core/provider?styling=default-theme Illustrates how to place the media provider within a media player and overlay UI elements like controls. ```html

``` -------------------------------- ### Handle Provider Setup Event Source: https://vidstack.io/docs/wc/player/core-concepts/loading?styling=default-theme Use the 'provider-setup' event to execute logic once a provider has been rendered and is ready to load media sources. ```javascript // Provider is rendered, attached event listeners, and ready to load source. player.addEventListener('provider-setup', (event) => { const provider = event.detail; if (isHLSProvider(provider)) { // ... } }); ``` -------------------------------- ### Time Slider Instance and State Source: https://vidstack.io/docs/player/components/sliders/time-slider?styling=css Example of how to get a reference to the Time Slider instance and access its state properties. ```javascript import { TimeSlider, TimeSliderInstance } from "@vidstack/react" const ref = useRef(null), { /* state props */ } = useStore(TimeSliderInstance, ref); ``` -------------------------------- ### Get Slider Video Element Reference Source: https://vidstack.io/docs/wc/player/components/sliders/slider-video?styling=default-theme Provides an example of how to obtain a reference to the media-slider-video DOM element for direct interaction. ```javascript // Get element reference to call props/methods. const instance = document.querySelector("media-slider-video"); ``` -------------------------------- ### Get HLS Provider Video Element Source: https://vidstack.io/docs/player/api/providers/hls?styling=css Demonstrates how to obtain a reference to the underlying HTMLVideoElement from an HLS provider setup event. ```typescript import { isHLSProvider, MediaPlayer, type MediaProviderAdapter, type MediaProviderSetupEvent, } from '@vidstack/react'; function onProviderSetup(provider: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) { if (isHLSProvider(provider)) { const element = provider.video; // `HTMLVideoElement` } } ``` -------------------------------- ### Initialize VS Code Settings Source: https://vidstack.io/docs/player/getting-started/installation/solid Create the settings file to enable custom HTML data for Vidstack elements. ```bash touch .vscode/settings.json ``` -------------------------------- ### AudioGainSlider Instance Setup Source: https://vidstack.io/docs/player/components/sliders/audio-gain-slider Demonstrates how to set up and reference the AudioGainSlider component using `useRef` and `useEffect` for accessing its instance methods and state. ```javascript import { AudioGainSlider, type AudioGainSliderInstance } from "@vidstack/react" const ref = useRef(null); useEffect(() => { /* Use props/methods here. */ }, []) ``` -------------------------------- ### onProviderSetup Source: https://vidstack.io/docs/player/components/core/player?styling=css Fired immediately after the provider has been set up. Prefer the `provider-change` event for configuration. ```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. ### Method `function` ### Parameters #### Path Parameters - None #### Query Parameters - None #### Request Body - None ### Parameters - **adapter** (MediaProviderAdapter) - Description of adapter - **nativeEvent** (MediaProviderSetupEvent) - Description of nativeEvent ### Response #### Success Response (200) - None #### Response Example - None ``` -------------------------------- ### startLoading 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. ```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 #### Path Parameters None #### Query Parameters None #### Request Body - **triggerEvent** (Event) - The event that triggered this action. ### Request Example ```javascript remote.startLoading(triggerEvent); ``` ### Response None ``` -------------------------------- ### Querying the Media Quality Radio Group Instance Source: https://vidstack.io/docs/wc/player/components/menus/quality-radio-group?styling=default-theme Example of how to get a reference to the media quality radio group element in JavaScript to interact with its properties and methods. ```javascript // Get element reference to call props/methods. const instance = document.querySelector("media-quality-radio-group"); ``` -------------------------------- ### Example JSON Cues Format Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css Illustrates the structure for defining cues within a JSON text track, specifying start time, end time, and the text content. ```json [ { "startTime": 0, "endTime": 5, "text": "Cue One!" }, { "startTime": 5, "endTime": 10, "text": "Cue Two!" } ] ``` -------------------------------- ### startLoading Source: https://vidstack.io/docs/player/components/core/player Initiates the media loading process. This method can only be called once and has no effect if called subsequently. ```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 ``` ``` -------------------------------- ### Quality Submenu Example Source: https://vidstack.io/docs/player/components/menus/menu Demonstrates how to create a quality selection submenu using `Menu` and `useVideoQualityOptions`. Includes custom styling and icons. ```tsx import { type ReactElement } from 'react'; import { Menu, useVideoQualityOptions } from '@vidstack/react'; // See "Icons" component page for setup before importing the following: import { ChevronLeftIcon, ChevronRightIcon, RadioButtonIcon, RadioButtonSelectedIcon, SettingsMenuIcon, } from '@vidstack/react/icons'; // Re-use styles across other submenus. const submenuClassName = 'hidden w-full flex-col items-start justify-center outline-none data-[keyboard]:mt-[3px] data-[open]:inline-block', radioClassName = 'ring-sky-400 group relative flex w-full cursor-pointer select-none items-center justify-start rounded-sm p-2.5 outline-none data-[hocus]:bg-white/10 data-[focus]:ring-[3px]', radioIconClassName = 'h-4 w-4 text-white group-data-[checked]:hidden', radioSelectedIconClassName = 'text-indigo-400 hidden h-4 w-4 group-data-[checked]:block'; function QualitySubmenu() { const options = useVideoQualityOptions(), currentQuality = options.selectedQuality?.height, hint = options.selectedValue !== 'auto' && currentQuality ? `${currentQuality}p` : `Auto${currentQuality ? ` (${currentQuality}p)` : ''}`; return ( {options.map(({ label, value, bitrateText, select }) => ( {label} {bitrateText ? ( {bitrateText} ) : null} ))} ); } interface SubmenuButtonProps { label: string; hint: string; disabled?: boolean; icon: ReactElement; } function SubmenuButton({ label, hint, icon: Icon, disabled }: SubmenuButtonProps) { return ( {label} {hint} ); } ``` -------------------------------- ### Time Slider Instance and State Subscription Source: https://vidstack.io/docs/player/components/sliders/time-slider Example of how to get a reference to the Time Slider instance and subscribe to its state updates. This is useful for imperative control or observing state changes. ```typescript import { TimeSlider, type TimeSliderInstance } from "@vidstack/react" const ref = useRef(null); useEffect(() => { /* Use props/methods here. */ }, []) ``` ```typescript (callback: Effect) => Unsubscribe ``` -------------------------------- ### Basic Remotion Provider Integration Source: https://vidstack.io/docs/player/api/providers/remotion?styling=default-theme Integrate the Remotion provider by passing a Remotion video source to the MediaPlayer component. This example shows the basic setup with required and optional properties. ```jsx import { MediaPlayer, MediaProvider } from '@vidstack/react'; import { type RemotionMediaResource } from '@vidstack/react/player/remotion'; null, errorFallback: () => null, onError(e) { // ... }, }}> {/* ... */} ``` -------------------------------- ### 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. ### Method `function` ### Parameters - **nativeEvent** (DASHLibLoadStartEvent) - Description not available ``` -------------------------------- ### Fragment Loading Started Event Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme Triggered when a fragment download has started. ```typescript function (nativeEvent: DASHFragmentLoadingStartedEvent) => void ``` -------------------------------- ### Data Attribute Example Source: https://vidstack.io/docs/wc/player/components/display/time?styling=default-theme Example of styling the media-time component using a data attribute. ```css /* Example. */ media-time[data-foo] {} ``` -------------------------------- ### Media Variant Example Source: https://vidstack.io/docs/player/styling/tailwind?styling=default-theme A simple example of applying a media-paused variant to a div element. ```jsx // Example

``` -------------------------------- ### Basic HTML Usage Source: https://vidstack.io/docs/wc/player/components/buttons/live-button?styling=default-theme A minimal HTML example demonstrating the usage of the media-live-button custom element. ```html ``` -------------------------------- ### startLoadingPoster Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=css 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. ```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 Signature ```typescript startLoadingPoster(triggerEvent?: Event) ``` ### Usage ```javascript remote.startLoadingPoster(triggerEvent); ``` ``` -------------------------------- ### DASH Manifest Loading Started Event Handler Source: https://vidstack.io/docs/player/api/providers/dash?styling=css Triggered when the DASH manifest load has started. ```typescript function onDashManifestLoadingStarted(nativeEvent: DASHManifestLoadingStartedEvent): void; ``` -------------------------------- ### Fullscreen Button Data Attributes Example Source: https://vidstack.io/docs/wc/player/components/buttons/fullscreen-button?styling=default-theme Example of using the `data-active` and `data-supported` attributes for styling. ```css /* Example. */ media-fullscreen-button[data-foo] {} ``` -------------------------------- ### Install via CDN Source: https://vidstack.io/docs/player/getting-started/installation/javascript?install=cdn Include the player library via a CDN link in your HTML file. ```html ``` -------------------------------- ### onMediaStartLoading Source: https://vidstack.io/docs/player/components/core/player?styling=css 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`. ### Signature ```typescript (nativeEvent: MediaStartLoadingRequestEvent) => void ``` ``` -------------------------------- ### Data Attribute Example Source: https://vidstack.io/docs/wc/player/components/buttons/live-button?styling=default-theme Example of how to style the media-live-button using the `data-foo` attribute selector in CSS. ```css /* Example. */ media-live-button[data-foo] {} ``` -------------------------------- ### CSS Data Attribute Example Source: https://vidstack.io/docs/player/components/buttons/caption-button An example of using a data attribute in CSS for styling components. ```css .component[data-foo] {} ``` -------------------------------- ### onMediaPosterStartLoading Source: https://vidstack.io/docs/player/components/core/player?styling=css 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`. ### Signature ```typescript (nativeEvent: MediaPosterStartLoadingRequestEvent) => void ``` ``` -------------------------------- ### Menu Structure with Items Source: https://vidstack.io/docs/player/components/menus/menu Demonstrates a basic menu structure using Menu.Root, Menu.Button, and Menu.Items for displaying options. ```jsx ``` -------------------------------- ### Get Volume Slider Instance Source: https://vidstack.io/docs/wc/player/components/sliders/volume-slider?styling=default-theme Get a reference to the media-volume-slider element to interact with its props and methods. ```javascript // Get element reference to call props/methods. const instance = document.querySelector("media-volume-slider"); ``` -------------------------------- ### Menu Structure Example Source: https://vidstack.io/docs/player/components/menus/menu Demonstrates the basic structure of a menu with a button, content, and an item. The placement prop controls the menu's position relative to the button. ```html ``` -------------------------------- ### DASH Period Switch Started Event Handler Source: https://vidstack.io/docs/player/api/providers/dash?styling=css Triggered when a new DASH stream (period) starts. ```typescript function onDashPeriodSwitchStarted(data: PeriodSwitchEvent, nativeEvent: DASHPeriodSwitchStartedEvent): void; ``` -------------------------------- ### Speed Slider Instance Setup Source: https://vidstack.io/docs/player/components/sliders/speed-slider?styling=css Demonstrates how to set up a ref for the SpeedSlider component to access its instance methods and state. ```javascript import { SpeedSlider, type SpeedSliderInstance } from "@vidstack/react" const ref = useRef(null); useEffect(() => { /* Use props/methods here. */ }, []) ``` -------------------------------- ### Dash Event Mode On Start Event Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme Dash events are triggered at their respective start points on the timeline. ```typescript function (nativeEvent: DASHEventModeOnStartEvent) => void ``` -------------------------------- ### Basic Usage with Media Player Source: https://vidstack.io/docs/wc/player/components/display/poster?styling=default-theme A minimal example showing how to include a media-poster within a media-player element. ```html

``` -------------------------------- ### Change Clip Start Time Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Dispatch a `media-clip-start-change-request` event to update the clip start time in seconds. ```javascript remote.changeClipStart(100); // start at 100 seconds ``` -------------------------------- ### Basic Media Player Markup Source: https://vidstack.io/docs/player/getting-started/installation/web-components Set up the basic HTML markup for the media player. ```jsx ``` -------------------------------- ### DASH.js Library Load Start Event Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme Fired when the browser begins downloading the `dash.js` library. ```typescript function (nativeEvent: DASHLibLoadStartEvent) => void ``` -------------------------------- ### CSS Data Attribute Example Source: https://vidstack.io/docs/wc/player/components/display/poster?styling=default-theme An example of how to style the media-poster component using the `data-visible` attribute in CSS. ```css /* Example. */ media-poster[data-foo] {} ``` -------------------------------- ### Data Attribute Styling Example Source: https://vidstack.io/docs/wc/player/components/buttons/mute-button?styling=default-theme Example CSS for styling the Mute Button based on its `data-foo` attribute. ```css /* Example. */ media-mute-button[data-foo] {} ``` -------------------------------- ### Configure Live DVR Source: https://vidstack.io/docs/wc/player/api/live?styling=default-theme Enable DVR functionality and set the minimum seekable window in seconds. ```html ``` -------------------------------- ### Example JSON Regions and Cues Format Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css Demonstrates how to define regions and cues together in a JSON text track, associating cues with specific regions. ```json { "regions": [{ "id": "0", "lines": 3, "scroll": "up" }], "cues": [{ "region": { "id": "0" }, "startTime": 0, "endTime": 5, "text": "Hello!" }] } ``` -------------------------------- ### CSS Data Attributes Example Source: https://vidstack.io/docs/player/components/layouts/default-layout Example of CSS selectors targeting data attributes for layout styling. ```css .component[data-foo] {} /* Example. */ ``` -------------------------------- ### Start Media Loading Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme Dispatch a `media-start-loading` event to initiate the media loading process. Requires a custom media loading strategy. ```javascript remote.startLoading(triggerEvent); ``` -------------------------------- ### Install Vidstack Packages Source: https://vidstack.io/docs/player/getting-started/installation/svelte Use npm or yarn to install the necessary Vidstack packages for your Svelte project. ```bash npm install vidstack # or yarn add vidstack ``` -------------------------------- ### Install Vidstack Packages Source: https://vidstack.io/docs/player/getting-started/installation/vue Install the necessary Vidstack packages for your Vue application using npm or yarn. ```bash npm install vidstack # or yarn add vidstack ``` -------------------------------- ### Player Instance Setup Source: https://vidstack.io/docs/player/components/core/player?styling=css Set up a MediaPlayer instance using React's useRef and useEffect hooks. This is a common pattern for interacting with player methods and state. ```javascript import { MediaPlayer, type MediaPlayerInstance } from "@vidstack/react" const ref = useRef(null); useEffect(() => { /* Use props/methods here. */ }, []) ``` -------------------------------- ### onHlsLibLoadStart Source: https://vidstack.io/docs/player/api/providers/hls?styling=css Fired when the browser begins downloading the `hls.js` library. This event signals the start of the library download and includes the native HLS event. ```APIDOC ## onHlsLibLoadStart ### Description Fired when the browser begins downloading the `hls.js` library. ### Method `function` ### Parameters - **nativeEvent** (HLSLibLoadStartEvent) - The native HLS event object. ``` -------------------------------- ### Install Vidstack Packages Source: https://vidstack.io/docs/player/getting-started/installation/react?provider=video&styling=plyr-layout Use npm or yarn to install the necessary Vidstack packages for your React project. ```bash npm install --save vidstack # or yarn add vidstack ``` -------------------------------- ### Player and Button Styling with CSS Variables Source: https://vidstack.io/docs/player/components/buttons/caption-button?styling=css This example demonstrates how to style the player and buttons using CSS variables for customization. It includes styles for focus rings and hover effects. ```css .media-player { /* Player CSS variables (defaults shown). */ --media-font-family: sans-serif; --media-controls-color: #f5f5f5; --media-focus-ring: 0 0 0 3px rgb(78 156 246); } .vds-button { /* CSS variables available for customization (defaults shown). */ --media-button-color: var(--media-controls-color, #f5f5f5); --media-button-size: 40px; --media-button-icon-size: 80%; --media-button-padding: 0px; --media-button-border-radius: 8px; --media-button-hover-bg: rgb(255 255 255 / 0.2); --media-button-hover-transform: scale(1); --media-button-hover-transition: transform 0.2s ease-in; --media-button-touch-hover-border-radius: 100%; --media-button-touch-hover-bg: rgb(255 255 255 / 0.2); } .vds-button[data-active] .cc-off-icon, .vds-button:not([data-active]) .cc-on-icon { display: none; } ``` -------------------------------- ### Install Vidstack Packages Source: https://vidstack.io/docs/player/getting-started/installation/react Use npm or yarn to install the necessary Vidstack packages for your React project. ```bash npm install --save "@vidstack/react" # or yarn add "@vidstack/react" ``` -------------------------------- ### Basic Media Controls HTML Structure Source: https://vidstack.io/docs/wc/player/components/display/controls?styling=default-theme Sets up the media player with a provider and a media controls container with multiple control groups. ```html

Top Controls Group

Center Controls Group

Bottom Controls Group

``` -------------------------------- ### Getting MediaMenuItem Instance Source: https://vidstack.io/docs/wc/player/components/menus/menu?styling=default-theme Illustrates how to get a reference to a media menu item instance using querySelector. ```javascript // Get element reference to call props/methods. const instance = document.querySelector("media-menu-item"); ``` -------------------------------- ### Handle Media Start Loading Request Source: https://vidstack.io/docs/player/components/core/player?styling=css Fired when requesting media to begin loading. This will only take effect if the `load` strategy is set to `custom`. ```typescript (nativeEvent: MediaStartLoadingRequestEvent) => void ``` -------------------------------- ### onLoadStart Event Handler Source: https://vidstack.io/docs/player/components/core/player?styling=css Fired when the browser begins loading a media resource. ```typescript (nativeEvent: MediaLoadStartEvent) => void ``` -------------------------------- ### onProviderSetup Event Source: https://vidstack.io/docs/player/components/core/player?styling=css Fired immediately after the provider has been set up. Prefer the `provider-change` event for configuration. ```typescript function (adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void ``` -------------------------------- ### Tooltip CSS Example Source: https://vidstack.io/docs/wc/player/components/buttons/tooltip?styling=default-theme Example CSS for styling the main tooltip element based on a custom data attribute. ```css media-tooltip[data-foo] {} ```