Skip to content

docs(site): add Google Cast documentation#1681

Merged
luwes merged 6 commits into
videojs:mainfrom
Jerricho93:docs/1561-google-cast
Jun 18, 2026
Merged

docs(site): add Google Cast documentation#1681
luwes merged 6 commits into
videojs:mainfrom
Jerricho93:docs/1561-google-cast

Conversation

@Jerricho93

@Jerricho93 Jerricho93 commented Jun 11, 2026

Copy link
Copy Markdown
Collaborator

Closes #1561

Summary

Add docs for Cast feature.

Changes

  • New concept guide (concepts/cast) explains the sender/receiver model, lazy SDK loading, session lifecycle, and how to configure Cast via castReceiver, castCustomData, castSrc, castContentType, and castStreamType.
  • New component reference (reference/cast-button) documents CastButton / <media-cast-button> behavior, data-cast-state / data-availability styling hooks, accessibility, and includes live demos for React and HTML.
  • Both pages appear in the sidebar; reference/feature-remote-playback now cross-links to the concept guide.
Open items (pending team answers)
  • Demo media element: demos use a plain <Video> / <video> element, which doesn't have GoogleCastMixin applied. Switching to HlsVideo / <hls-video> is pending team alignment on PR feat(media)!: add Google Cast by default to HLS, DASH media #1661.
  • castOptions: not documented yet — pending clarification on whether it should be surfaced as a read-only accessor or left internal.

Testing

  • Both framework variants render at localhost:4321 under /docs/framework/{react,html}/concepts/cast/ and /docs/framework/{react,html}/reference/cast-button/.
  • Sidebar entries appear in the correct sections; <ComponentReference> table renders props, state, and data-attrs.
  • [data-availability="unsupported"] hides the Cast button on non-Chromium browsers as documented.

Note

Low Risk
Documentation and demo assets only; no runtime library or player behavior changes.

Overview
Adds Google Cast documentation to the docs site: a new Concepts guide, a CastButton component reference with live React/HTML demos, and navigation plus cross-links from Remote Playback.

The concepts/cast page explains Chromecast support for HLS/DASH: sender/receiver model, session states via remote playback, lazy cast_sender.js loading, minimal setup with CastButton / <media-cast-button>, and configuration through config.googleCast (receiver, customData, src/contentType, streamType, HLS segment detection). It also covers selectRemotePlayback, browser availability, and hiding the control when data-availability="unsupported".

reference/cast-button documents toggle behavior, data-cast-state / data-availability styling, default **aria-label**s, and embeds basic usage demos. docs.config.ts registers both pages in the sidebar; feature-remote-playback links to the Cast concept guide.

Reviewed by Cursor Bugbot for commit 6b984ce. Bugbot is set up for automated code reviews on this repo. Configure here.

Jerricho93 and others added 3 commits June 11, 2026 14:18
- New concept page: site/src/content/docs/concepts/cast.mdx
  Covers Cast model, lazy SDK loading, session lifecycle, all
  configuration props (castReceiver, castCustomData, castSrc,
  castContentType, castStreamType), state selectors, and browser
  availability pattern.

- New reference page: site/src/content/docs/reference/cast-button.mdx
  Mirrors pip-button.mdx structure — anatomy, behavior, styling,
  accessibility, and Basic Usage demos for React and HTML.

- New demos: site/src/components/docs/demos/cast-button/
  React (BasicUsage.tsx + .css) and HTML (BasicUsage.astro + .html
  + .css + .ts) following the established demo conventions.

- Sidebar: adds concepts/cast and reference/cast-button entries.

- Cross-link: feature-remote-playback.mdx gets a DocsLinkCard
  pointing to the new concepts/cast page.

Closes videojs#1561

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
GoogleCastMixin is being added to HlsMedia and DashMedia in videojs#1661,
so Cast is no longer limited to Mux media elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@netlify

netlify Bot commented Jun 11, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 6b984ce
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a34390593bb030008cc2eda
😎 Deploy Preview https://deploy-preview-1681--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

@Jerricho93 is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Jun 11, 2026 6:58pm

Request Review

<hls-video src="..." castreceiver="YOUR_APP_ID"></hls-video>
```ts
const video = document.querySelector('hls-video');
video.config = { googleCast: { receiver: 'YOUR_APP_ID' } };

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

src="..."
castCustomData={{ token: 'abc123', userId: 'u_789' }}
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
config={{ googleCast: { customData: { token: 'abc123', userId: 'u_789' } } }}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@Jerricho93 Jerricho93 marked this pull request as ready for review June 18, 2026 18:32

@luwes luwes left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@luwes luwes merged commit fa768da into videojs:main Jun 18, 2026
23 of 25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Docs: Google Cast Documentation

2 participants