### Full Player Example Source: https://github.com/videojs/v10/blob/main/rfc/player-api/html.md An example demonstrating the integration of various Video.js HTML components to create a full video player setup. ```APIDOC ## Full Example ```ts // main.ts import '@videojs/html/video/player'; import '@videojs/html/feature/streaming'; import '@videojs/html/media/hls-video'; import '@videojs/html/video/skin.css'; import '@videojs/html/video/skin'; ``` ```html

``` ``` -------------------------------- ### Guide Frontmatter Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/write-guides.mdx Essential frontmatter for any guide, including title and a one-sentence description for metadata and search. ```yaml --- title: 'Your guide title' description: 'One-sentence summary for search and metadata' --- ``` -------------------------------- ### Add Guide to Sidebar Configuration Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/write-guides.mdx Example of how to add a new guide to the sidebar navigation in the documentation configuration file. ```typescript { slug: 'how-to/write-guides', title: 'Writing guides' } ``` -------------------------------- ### Install Dependencies (Site Directory) Source: https://github.com/videojs/v10/blob/main/site/README.md Run this command within the site/ directory to install all necessary project dependencies. ```bash pnpm install ``` -------------------------------- ### Install Video.js with bun Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/installation.mdx Use this command to install the Video.js React package using bun. ```bash bun add @videojs/react ``` -------------------------------- ### Generate Interactive Installation Snippet Source: https://github.com/videojs/v10/blob/main/packages/cli/README.md Generate a framework-specific installation snippet by providing various configuration options. This command interactively guides you through setting up Video.js for your project. ```bash videojs docs how-to/installation \ --framework react \ --preset video \ --skin default \ --media hls \ --install-method pnpm \ --source-url https://example.com/video.m3u8 ``` -------------------------------- ### Install @videojs/store Source: https://github.com/videojs/v10/blob/main/packages/store/README.md Install the @videojs/store package using npm. ```bash npm install @videojs/store ``` -------------------------------- ### Start Local Development Server (Site Directory) Source: https://github.com/videojs/v10/blob/main/site/README.md Use this command inside the site/ directory to start a local development server. ```bash pnpm dev ``` -------------------------------- ### Split Provider and Container Example Source: https://github.com/videojs/v10/blob/main/rfc/player-api/html.md Provides an HTML structure demonstrating how to use separate provider and container elements. This setup is useful when the media element and its controls need to be in different DOM locations. ```html

``` -------------------------------- ### Install @videojs/element Source: https://github.com/videojs/v10/blob/main/packages/element/README.md Install the package using npm. ```bash npm install @videojs/element ``` -------------------------------- ### Install Video.js with npm Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/installation.mdx Use this command to install the Video.js React package using npm. ```bash npm install @videojs/react ``` -------------------------------- ### Minimal HTML Player Setup Source: https://github.com/videojs/v10/blob/main/rfc/player-api/examples.md Basic setup for a Video.js player using plain HTML. Requires importing the player component. ```ts import '@videojs/html/video/player'; ``` ```html

``` -------------------------------- ### Install Video.js with yarn Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/installation.mdx Use this command to install the Video.js React package using yarn. ```bash yarn add @videojs/react ``` -------------------------------- ### Install Video.js 7 via npm (specific version) Source: https://github.com/videojs/v10/blob/main/site/src/content/blog/2018-05-11-video-js-7-is-here.mdx Install a specific pre-release version of Video.js 7 using npm. ```bash npm install video.js@7.0.0 ``` -------------------------------- ### Basic Usage Example (HTML) Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/playback-rate-button.mdx A full example of integrating and styling the PlaybackRateButton in an HTML context, including necessary TypeScript for functionality. ```html

``` ```css .video-js .playback-rate-button { /* Add custom styles here */ } ``` ```ts import "@videojs/v10/dist/video.js.css"; import "@videojs/v10/dist/playback-rate-button.css"; import { PlaybackRateButton, } from "@videojs/v10/dist/playback-rate-button"; customElements.define("media-playback-rate-button", PlaybackRateButton); // Example of how to use the component const player = new Player({}); player.addChild(new PlaybackRateButton(player)); ``` -------------------------------- ### Install CLI Globally Source: https://github.com/videojs/v10/blob/main/packages/cli/README.md Install the CLI globally to use the `videojs` command directly. Alternatively, use `npx @videojs/cli` without global installation. ```bash npm install -g @videojs/cli ``` ```bash videojs --help ``` -------------------------------- ### Install Video.js 7.1.0 Source: https://github.com/videojs/v10/blob/main/site/src/content/blog/2018-07-10-video-js-7-1-and-6-11-autoplay-and-fullscreen-changes.mdx Use npm to install the 'next' tag for Video.js version 7.1.0. ```bash npm install video.js@next ``` -------------------------------- ### Packaged HTML Video Player Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/concepts/skins.mdx Shows an example of using a packaged skin within an HTML Video.js player. This is the simplest way to apply a skin. ```html

``` -------------------------------- ### Start Local Development Server (Monorepo Root) Source: https://github.com/videojs/v10/blob/main/site/README.md Use this command to start a local development server when working from the monorepo's root directory. ```bash pnpm dev:site ``` -------------------------------- ### Install Video.js with pnpm Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/installation.mdx Use this command to install the Video.js React package using pnpm. ```bash pnpm add @videojs/react ``` -------------------------------- ### Basic Usage Example (React) Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/playback-rate-button.mdx A complete example demonstrating the basic usage and styling of the PlaybackRateButton in a React application. ```tsx import "@/components/docs/demos/playback-rate-button/react/css/BasicUsage.css"; export default function App() { return ( ); } ``` ```css .video-js .playback-rate-button { /* Add custom styles here */ } ``` -------------------------------- ### PlayerController Example (HTML) Source: https://github.com/videojs/v10/blob/main/rfc/player-api/api.md Implement a custom media element using `PlayerController` to access and react to player state. This example shows how to subscribe to playback state and toggle playback on click. ```ts import { createPlayer, MediaElement } from '@videojs/html'; import { features, selectPlayback } from '@videojs/core/dom'; const { context, PlayerController } = createPlayer({ features: [...features.video], }); class MediaPlayButton extends MediaElement { // With selector: subscribes, .value is selected state #playback = new PlayerController(this, context, selectPlayback); override connectedCallback() { super.connectedCallback(); this.addEventListener('click', this.#handleClick); } #handleClick = () => { this.#playback.value?.toggle(); }; override update() { const playback = this.#playback.value; if (!playback) return; this.setAttribute('aria-pressed', String(!playback.paused)); } } ``` -------------------------------- ### Minimal React Player Setup Source: https://github.com/videojs/v10/blob/main/rfc/player-api/examples.md Basic setup for a Video.js player in a React application. Requires importing core features and creating a provider and container. ```tsx import { createPlayer } from '@videojs/react'; import { features } from '@videojs/core/dom'; const { Provider: VideoProvider, Container: VideoContainer } = createPlayer({ features: [...features.video], }); function App() { return (

); } ``` -------------------------------- ### Basic Usage HTML Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/cast-button.mdx A complete example demonstrating the basic usage of the media-cast-button in HTML, including its associated CSS and TypeScript for initialization. ```html ``` ```css /* During an active session */ media-cast-button[data-cast-state="connected"] { color: blue; } /* Hide when Cast is unsupported (non-Chromium browsers) */ media-cast-button[data-availability="unsupported"] { display: none; } ``` ```ts import "@vidstack/react/player"; // @ts-ignore window.mediaChrome.default(); ``` -------------------------------- ### Install Video.js 6.0 RC via npm Source: https://github.com/videojs/v10/blob/main/site/src/content/blog/2017-01-23-video-js-6-0-0-rc-0-the-first-rc.mdx Use this command to install the beta version of Video.js 6.0, which is the first Release Candidate. This is useful for testing the upcoming features and providing feedback. ```bash npm install video.js@beta ``` -------------------------------- ### HTML Background Preset Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/concepts/presets.mdx Shows how to implement the background preset using plain HTML and custom elements. This requires importing the specific player, video, and skin components. ```html

``` -------------------------------- ### Enable Live UI in HTML Source: https://github.com/videojs/v10/blob/main/site/src/content/blog/2019-01-11-video-js-7-4.mdx Configure the `data-setup` attribute in the HTML `` tag with `"liveui": true` to enable the experimental live user interface. ```html ``` -------------------------------- ### Sidebar Configuration Structure Example Source: https://github.com/videojs/v10/blob/main/site/CLAUDE.md Define the sidebar structure in `src/docs.config.ts` with hierarchical sections and guides. Each guide can optionally specify a `sidebarLabel`, `frameworks` for restriction, or `devOnly` for development-only visibility. ```typescript export const sidebar: Sidebar = [ { sidebarLabel: 'Components', contents: [ { slug: 'reference/play-button' }, { slug: 'reference/mute-button', sidebarLabel: 'Mute' }, ], }, ]; ``` -------------------------------- ### React Hello World with Video.js v10 Source: https://github.com/videojs/v10/blob/main/site/src/content/blog/2026-03-10-videojs-v10-beta-hello-world-again.mdx A minimal React "hello world" example using Video.js v10, demonstrating a small file size with only essential features like playback. ```tsx import { createPlayer, features } from '@videojs/react'; import { Video } from '@videojs/react/video'; const Player = createPlayer({ features: [features.playback], }); function App() { const store = Player.usePlayer(); const paused = Player.usePlayer((s) => s.paused); return (

); } ``` -------------------------------- ### Docs Routing Pattern Example Source: https://github.com/videojs/v10/blob/main/site/CLAUDE.md Illustrates the nested index page redirect logic for documentation URLs. It shows how different URL structures resolve to specific guides or index pages. ```text /docs/ → redirect to first guide /docs/framework/ → redirect to first guide /docs/framework/{framework}/ → redirect to first guide /docs/framework/{framework}/{slug} → render guide ``` -------------------------------- ### React Player Setup Source: https://github.com/videojs/v10/blob/main/rfc/player-api/index.md Set up a React player with core video features and a default skin. Import necessary CSS and components for a functional video player. ```tsx import '@videojs/react/video/skin.css'; import { createPlayer } from '@videojs/react'; import { features } from '@videojs/core/dom'; import { VideoSkin } from '@videojs/react/video/skin'; const { Provider: VideoProvider } = createPlayer({ features: [...features.video], }); function App() { return (

); } ``` -------------------------------- ### HTML Basic Usage Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/simple-hls-audio-only.mdx Provides a complete HTML, CSS, and TypeScript example for using the SimpleHlsAudioOnly component in a web page. This setup includes the necessary imports and configurations for playing an audio-only HLS stream. ```html

``` ```css .vjs-theme-v1-audio { /* --vjs-theme-v1-audio-primary: #007bff; */ /* --vjs-theme-v1-audio-secondary: #6c757d; */ /* --vjs-theme-v1-audio-background: #f8f9fa; */ /* --vjs-theme-v1-audio-text: #212529; */ } .vjs-theme-v1-audio .vjs-control-bar { /* Hide the progress bar for audio-only players */ display: none; } .vjs-theme-v1-audio .vjs-big-play-button { /* Center the big play button */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .vjs-theme-v1-audio .vjs-poster { /* Ensure the poster is visible */ display: block; } .vjs-theme-v1-audio .vjs-loading-spinner { /* Center the loading spinner */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .vjs-theme-v1-audio .vjs-error-display { /* Center the error message */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .vjs-theme-v1-audio .vjs-tech { /* Ensure the video element takes up the full container */ width: 100%; height: 100%; } .vjs-theme-v1-audio { /* Set a default aspect ratio for audio players */ aspect-ratio: 16 / 9; } /* Ensure the player is responsive */ .vjs-theme-v1-audio { width: 100%; max-width: 600px; margin: 0 auto; } ``` ```ts import videojs from 'video.js'; import '@videojs/themes/dist/v1/video-js.css'; import '@videojs/themes/dist/v1/video-js.audio.css'; const player = videojs('my-video', { // The HLS plugin is required for HLS streams techOrder: ['hls'], // The HLS options are passed to the HLS plugin hls: { // This option tells the HLS plugin to only play the audio rendition // of the HLS stream, even if the source is a mixed audio/video manifest. audioOnly: true, }, }); ``` -------------------------------- ### Example: loadTextTrackCues Reactor Source: https://github.com/videojs/v10/blob/main/internal/design/spf/actor-reactor-factories.md Manages loading text track cues across multiple states, utilizing derived state signals and untracking for non-reactive reads. It handles actor setup, teardown, and cue loading based on current time and selected track. ```typescript const derivedStateSignal = computed(() => deriveState(state.get(), owners.get())); const currentTimeSignal = computed(() => state.get().currentTime ?? 0); const selectedTrackSignal = computed(() => findSelectedTrack(state.get())); const reactor = createMachineReactor({ initial: 'preconditions-unmet', monitor: () => derivedStateSignal.get(), states: { 'preconditions-unmet': { entry: () => { teardownActors(owners); }, }, 'setting-up': { entry: () => { teardownActors(owners); const mediaElement = owners.get().mediaElement as HTMLMediaElement; const textTracksActor = createTextTracksActor(mediaElement); const segmentLoaderActor = createTextTrackSegmentLoaderActor(textTracksActor); update(owners, { textTracksActor, segmentLoaderActor }); }, }, pending: {}, 'monitoring-for-loads': { effects: () => { const currentTime = currentTimeSignal.get(); const track = selectedTrackSignal.get()!; const { segmentLoaderActor } = untrack(() => owners.get()); segmentLoaderActor!.send({ type: 'load', track, currentTime }); }, }, }, }); ``` -------------------------------- ### React Player Setup with Custom Skin Source: https://github.com/videojs/v10/blob/main/rfc/player-api/examples.md Demonstrates setting up a Video.js player in a React application with custom features and a custom skin component. Includes defining a custom slice for analytics. ```tsx import { createPlayer } from '@videojs/react'; import { defineSlice } from '@videojs/store'; import { features, selectPlayback, selectTime, type PlayerTarget } from '@videojs/core/dom'; import { HlsVideo } from '@videojs/react/media/hls'; const analyticsSlice = defineSlice()({ state: ({ task }) => ({ trackEvent: task('trackEvent', ({ get }, name: string) => { console.log('track', name, get()); }), }), }); const { Provider: VideoProvider, Container: VideoContainer, usePlayer } = createPlayer({ features: [...features.video, ...features.streaming, analyticsSlice], }); function App() { return ( ); } function MyCustomSkin() { const playback = usePlayer(selectPlayback); const time = usePlayer(selectTime); if (!playback || !time) return null; return (

{time.currentTime} / {time.duration}

); } ``` -------------------------------- ### Example Blog Post Filename and URL Source: https://github.com/videojs/v10/blob/main/site/CLAUDE.md Illustrates the transformation of a date-prefixed filename into a clean slug and URL. ```text - File: 2024-01-15-new-release.mdx - Slug: new-release - URL: /blog/new-release/ ``` -------------------------------- ### React Player Container Setup Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/player-container.mdx Demonstrates the basic structure of a React player with Player.Provider and Player.Container, including a video element and Controls.Root. ```tsx {/* [!code focus] */}

{/* [!code focus] */} ``` -------------------------------- ### HTML Media Container Setup Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/player-container.mdx Illustrates the HTML structure for a media player using video-player and media-container, including a video element and media-controls. ```html

...

``` -------------------------------- ### Install Video.js 6.11.0 Source: https://github.com/videojs/v10/blob/main/site/src/content/blog/2018-07-10-video-js-7-1-and-6-11-autoplay-and-fullscreen-changes.mdx Use npm to install the 'next-6' tag for Video.js version 6.11.0. ```bash npm install video.js@next-6 ``` -------------------------------- ### Sidebar Configuration Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/write-references.mdx Example of how to add a new reference page to the sidebar configuration in `docs.config.ts`. ```APIDOC ## Add to the sidebar Open `site/src/docs.config.ts` and add your page alphabetically within the appropriate section: - **Components** — UI component reference pages - **Selectors** — State selectors (visible to both frameworks) - **Hooks & Utilities** (`frameworks: ['react']`) — React hooks and utilities - **Controllers & Mixins** (`frameworks: ['html']`) — HTML controllers and mixins ```ts { sidebarLabel: 'Components', contents: [ // sorted alphabetically { slug: 'reference/play-button' }, { slug: 'reference/your-component' }, // add here ], } ``` ``` -------------------------------- ### Build Production Site (Monorepo Root) Source: https://github.com/videojs/v10/blob/main/site/README.md Execute this command from the monorepo's root to build the production-ready site, outputting to the site/dist/ directory. ```bash pnpm build:site ``` -------------------------------- ### Component Reference Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/write-references.mdx Example of how to render a component reference table using the ComponentReference Astro component. ```APIDOC ## Component Reference ```mdx ``` The component automatically handles single-part and multi-part layouts. ``` -------------------------------- ### Conventional Commit Examples Source: https://github.com/videojs/v10/blob/main/CONTRIBUTING.md Examples of commit messages following conventional commit semantics for automated releases. ```shell feat(core): add volume smoothing hook ``` ```shell fix(react): correct prop mapping for picture-in-picture ``` ```shell chore(root): update linting ``` -------------------------------- ### Run Sandbox Development Server Source: https://github.com/videojs/v10/blob/main/apps/sandbox/README.md Starts the sandbox development server with workspace package watching. Also runs the docs site. ```bash pnpm dev:sandbox ``` -------------------------------- ### React Remaining Time Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/time.mdx Example for displaying the remaining time in a React application. Includes TSX and CSS. ```tsx import { RemainingDemoReact } from "@/components/demos/time/remaining"; import "@/components/demos/time/styles.css"; export default function Page() { return ; } ``` ```css .time { font-variant-numeric: tabular-nums; } ``` -------------------------------- ### TypeScript Import Examples Source: https://github.com/videojs/v10/blob/main/site/CLAUDE.md Demonstrates how to import types and functions from local modules using path aliases. Ensure the aliased paths correctly point to your source files. ```typescript import { sidebar } from '@/docs.config'; import type { Sidebar } from '@/types/docs'; import { filterSidebar } from '@/utils/docs/sidebar'; ``` -------------------------------- ### HLS Event Handling Example Source: https://github.com/videojs/v10/blob/main/internal/design/media.md Example of attaching an HLS video engine and listening for level switching events. ```typescript attach({ target, signal, set }) { const { media } = target; if (isHlsVideo(media)) { media.engine?.on(Hls.Events.LEVEL_SWITCHING, (_, data) => { set({ currentLevel: data.level }); }); } const video = resolveHTMLVideoElement(media); if (video) { const stream = video.captureStream(); } } ``` -------------------------------- ### Adaptive Skin Example Source: https://github.com/videojs/v10/blob/main/rfc/player-api/decisions.md Demonstrates an adaptive skin that adjusts its UI based on loaded features. The `` element will automatically show a quality menu if the streaming feature is loaded. ```html ``` -------------------------------- ### Add Framework-Specific Guide to Sidebar Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/how-to/write-guides.mdx Demonstrates how to configure a guide to be visible only for specific frameworks or styles within the sidebar. ```typescript { slug: 'how-to/write-guides', title: 'Writing guides', frameworks: ['react'], // Only for React styles: ['css'] // Only for CSS } ``` -------------------------------- ### Install Workspace Dependencies with PNPM Source: https://github.com/videojs/v10/blob/main/CLAUDE.md Use this command to install all dependencies for the Video.js monorepo. Always use PNPM for package management. ```bash pnpm install ``` -------------------------------- ### Split Provider/Container Example Source: https://github.com/videojs/v10/blob/main/rfc/player-api/html.md Demonstrates how to use ProviderMixin and ContainerMixin separately when the media element and controls need different DOM locations. ```APIDOC ### Split Provider/Container When media element and container need different DOM locations: ```html

``` ``` -------------------------------- ### React Current/Duration Time Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/time.mdx Example of displaying both current and total duration time in a React component. Requires TSX and CSS. ```tsx import { CurrentDurationDemoReact } from "@/components/demos/time/current-duration"; import "@/components/demos/time/styles.css"; export default function Page() { return ; } ``` ```css .time { font-variant-numeric: tabular-nums; } ``` -------------------------------- ### Basic React Poster Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/poster.mdx A basic example demonstrating the usage of the Poster component in a React application with associated CSS for styling. ```tsx import React from 'react'; import Poster from '@vime/react'; import './App.css'; function App() { return ( ); } export default App; ``` ```css .poster:not([data-visible]) { display: none; } ``` -------------------------------- ### Using Packaged Skin vs. Custom UI in HTML Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/player-container.mdx Illustrates the HTML structure for using a packaged skin (video-skin) versus a custom UI with media-container. ```html

``` -------------------------------- ### Basic Usage React Example Source: https://github.com/videojs/v10/blob/main/site/src/content/docs/reference/cast-button.mdx A complete example demonstrating the basic usage of the CastButton in a React application, including its associated CSS. ```tsx import { CastButton } from '@vidstack/react'; import './styles.css'; function App() { return ( ); } export default App; ``` ```css /* During an active session */ .cast-button[data-cast-state="connected"] { color: blue; } /* Hide when Cast is unsupported (non-Chromium browsers) */ .cast-button[data-availability="unsupported"] { display: none; } ``` -------------------------------- ### Multi-State Machine Example: State Transitions Source: https://github.com/videojs/v10/blob/main/internal/design/spf/conventions/reactors.md An example of state transitions in a multi-state machine where action/availability verbs are necessary to distinguish sub-states. ```text 'preconditions-unmet' → 'idle' → 'resolving' → 'resolved' ``` -------------------------------- ### Preview Production Build Locally Source: https://github.com/videojs/v10/blob/main/site/README.md Preview your production build locally before deploying by running this command in the site/ directory. ```bash pnpm preview ```