From 60c75e282ed4065a2a4809dedbd544bed826e987 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Jul 2026 18:18:31 +0000 Subject: [PATCH 1/3] docs: move Google Cast lower in Concepts sidebar Move the Google Cast concept entry from the top of the Concepts section to the bottom, below the more foundational concepts. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_0146KwfYxv9abnktLTRvpd5A --- site/src/docs.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/docs.config.ts b/site/src/docs.config.ts index 167a68421..6793fb41f 100644 --- a/site/src/docs.config.ts +++ b/site/src/docs.config.ts @@ -36,12 +36,12 @@ export const sidebar: Sidebar = [ llmsDescription: 'Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.', contents: [ - { slug: 'concepts/cast', sidebarLabel: 'Google Cast' }, { slug: 'concepts/features' }, { slug: 'concepts/skins' }, { slug: 'concepts/presets' }, { slug: 'concepts/ui-components' }, { slug: 'concepts/accessibility' }, + { slug: 'concepts/cast', sidebarLabel: 'Google Cast' }, ], }, { From 790447cecc30e382068a2b54f2918a56c07b3093 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Jul 2026 18:35:06 +0000 Subject: [PATCH 2/3] docs(site): align Google Cast concept page with docs writing style Rework the Google Cast concept page to follow the docs skill conventions: code-first structure with the minimal setup up top, active voice, no gerund headings, framework-scoped config prose, fence titles on full examples, and first-mention links to the CastButton reference, skins, and Remote Playback pages. Also fix the intro to attribute the auto-appearing Cast button to the pre-built skins and document the availability values. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01KjkkhfrjtAvA3fUCgjCAMZ --- site/src/content/docs/concepts/cast.mdx | 141 +++++++++++++++--------- 1 file changed, 87 insertions(+), 54 deletions(-) diff --git a/site/src/content/docs/concepts/cast.mdx b/site/src/content/docs/concepts/cast.mdx index d4d132cbd..f186358dd 100644 --- a/site/src/content/docs/concepts/cast.mdx +++ b/site/src/content/docs/concepts/cast.mdx @@ -1,6 +1,6 @@ --- title: Google Cast -description: How to add Chromecast support to your Video.js player — lazy SDK loading, session lifecycle, and configuration options +description: Cast playback to Chromecast devices with built-in Google Cast support, and configure the receiver and load request --- import FrameworkCase from '@/components/docs/FrameworkCase.astro'; @@ -8,34 +8,80 @@ import DocsLink from '@/components/docs/DocsLink.astro'; import DocsLinkCard from '@/components/docs/DocsLinkCard.astro'; import Aside from '@/components/Aside.astro'; -Video.js has built-in Google Cast support for HLS and DASH media elements. When a Chromecast device is on the same network, a Cast button appears automatically in Chromium browsers. Tapping it starts a session that moves playback to the TV while the browser stays in control. +Video.js streaming media elements (HLS and DASH) have Google Cast built in. Add a CastButton and users can move playback to a Chromecast device while the browser stays in control: + + +```tsx title="App.tsx" +import { CastButton, createPlayer } from '@videojs/react'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; +import { videoFeatures } from '@videojs/react/video'; + +const Player = createPlayer({ features: videoFeatures }); + +export default function App() { + return ( + + + + + + + ); +} +``` + + + +```html title="index.html" + + + + + + +``` + + +The pre-built skins include a Cast button already. It appears when a Chromecast device is on the network and stays hidden otherwise. ## How Cast works Cast uses a **sender / receiver** model: -- **Sender** — the browser tab. It controls playback commands (play, pause, seek, volume) and sends a load request to the receiver with the source URL and metadata. -- **Receiver** — the Chromecast device running the default media receiver application (or a custom receiver you configure). +- **Sender** — the browser tab. It sends the receiver a load request with the source URL and metadata, then issues playback commands (play, pause, seek, volume). +- **Receiver** — the Chromecast device running a receiver application: Google's default media receiver, or a custom one you configure. ### Session lifecycle -A Cast session moves through three states, exposed via the Remote Playback feature: +A Cast session moves through three states, exposed by the Remote Playback feature: | State | Meaning | |---|---| | `'disconnected'` | No active session | -| `'connecting'` | User accepted; session negotiating | -| `'connected'` | Receiver is playing | +| `'connecting'` | Device picked; session starting | +| `'connected'` | Session active; receiver has the media | While `connected`, the media element's `play`, `pause`, `currentTime`, `volume`, `muted`, and `playbackRate` all proxy to the Cast receiver. Local playback is suspended. ### The lazy-loaded SDK -The Cast SDK (`cast_sender.js`) is injected into the page as a `