docs(site): add MuxData and GoogleCast API references; document status announcer and mux-video source API - #1902
Merged
Merged
Conversation
…ouncer + mux-video source Add hand-authored reference pages for the mux-data and google-cast media components (both non-rendering MediaComponentElement components the api-docs builder does not scan), move their option/configuration tables out of the concept guides into the references, and wire both into the Media Elements sidebar. Give the Mux Data and Google Cast concept guides an editorial pass so they stay in Diataxis explanation mode and point to the new references. Also document the #1659 status announcer and accessible container attrs in the accessibility concept guide, and the #1850 mux-video src/source/thumbnail/ storyboard/signed-playback API in the mux-video reference.
Move the reference/google-cast and reference/mux-data sidebar entries from the Media Elements section to the Components section, preserving alphabetical ordering.
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (12)
Players (5)
Skins (30)
UI Components (39)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (11)
Skins (27)
UI Components (33)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (73)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (12)
📦 @videojs/media — no changesEntries (14)
📦 @videojs/spf — no changesEntries (5)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
decepulis
commented
Jul 31, 2026
decepulis
left a comment
decepulis
left a comment
Collaborator
Author
There was a problem hiding this comment.
Requesting a few changes!
|
|
||
| ## See also | ||
|
|
||
| <DocsLinkCard slug="reference/google-cast">GoogleCast reference — every option</DocsLinkCard> |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| <DocsLinkCard slug="reference/google-cast">GoogleCast reference — every option</DocsLinkCard> | |
| <DocsLinkCard slug="reference/google-cast">GoogleCast reference</DocsLinkCard> |
| ### Cast a different source | ||
|
|
||
| By default the receiver loads the same URL the browser plays. Set `src` (and optionally `contentType`) to send the receiver a different one — for example, cast an HLS stream while the browser plays an MP4: | ||
| By default, the receiver loads the same source the browser plays through Google's [Default Media Receiver](https://developers.google.com/cast/docs/web_sender/integrate#default_media_web_receiver). Point Cast at your own receiver app, send a different source, attach custom data to the load request, or override the stream type through the component's options: |
Collaborator
Author
There was a problem hiding this comment.
Lots of removed copy here. I'm trusting that you made sure that useful information was preserved through this rewrite.
|
|
||
| ## See also | ||
|
|
||
| <DocsLinkCard slug="reference/mux-data">MuxData reference — every option</DocsLinkCard> |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| <DocsLinkCard slug="reference/mux-data">MuxData reference — every option</DocsLinkCard> | |
| <DocsLinkCard slug="reference/mux-data">MuxData reference</DocsLinkCard> |
| import DocsLink from '@/components/docs/DocsLink.astro'; | ||
| import DocsLinkCard from '@/components/docs/DocsLinkCard.astro'; | ||
|
|
||
| Adds Google Cast support to the player's media. It renders nothing — place it inside the player as a sibling of the media element, and pair it with a <DocsLink slug="reference/cast-button">CastButton</DocsLink>. See <DocsLink slug="concepts/cast">Google Cast</DocsLink> for how casting works. |
Collaborator
Author
There was a problem hiding this comment.
I'm not morally opposed to dashes -- in fact, I like using them in my own writing!
But your use of dashes does make me wonder if you adhered to writing-style.md which, iirc, asks authors to be judicious with them. If you did, disregard this comment! If you didn't, take a pass.
|
|
||
| ## See also | ||
|
|
||
| <DocsLinkCard slug="concepts/cast">Google Cast — how casting works</DocsLinkCard> |
Collaborator
Author
There was a problem hiding this comment.
If you MUST have both a title and additional information in a docslinkcard, consider using the dedicated title prop. (I think it's called that)
| import DocsLink from '@/components/docs/DocsLink.astro'; | ||
| import DocsLinkCard from '@/components/docs/DocsLinkCard.astro'; | ||
|
|
||
| Adds [Mux Data](https://www.mux.com/data) monitoring to the player's media. It renders nothing — place it inside the player as a sibling of the media element. See <DocsLink slug="concepts/mux-data">Mux Data</DocsLink> for how monitoring works. |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| Adds [Mux Data](https://www.mux.com/data) monitoring to the player's media. It renders nothing — place it inside the player as a sibling of the media element. See <DocsLink slug="concepts/mux-data">Mux Data</DocsLink> for how monitoring works. | |
| Adds [Mux Data](https://data.mux.com) monitoring to the player's media. It renders nothing — place it inside the player as a sibling of the media element. See <DocsLink slug="concepts/mux-data">Mux Data</DocsLink> for how monitoring works. |
|
|
||
| ## See also | ||
|
|
||
| <DocsLinkCard slug="concepts/mux-data">Mux Data — how monitoring works</DocsLinkCard> |
Collaborator
Author
There was a problem hiding this comment.
See title comment earlier
|
|
||
| ## Load a source | ||
|
|
||
| Point MuxVideo at Mux content two ways: a stream URL through `src`, or a structured `source` object. |
Collaborator
Author
There was a problem hiding this comment.
In React, prefer source and treat src as an escape hatch. In HTML, it's acceptable to name them as peers like you do here.
| ``` | ||
| </FrameworkCase> | ||
|
|
||
| MuxVideo fires a `sourcechange` event whenever the effective source changes structurally, whether you set `source` directly or assign a new `src`. Setting an equivalent source, such as a fresh object with the same values on a React re-render, doesn't re-fire it. |
Collaborator
Author
There was a problem hiding this comment.
Borderline too jargony for me. Take a jargon pass at all your guides according to writing-style.md
mihar-22
approved these changes
Jul 31, 2026
- Use DocsLinkCard description prop for card supporting text instead of cramming title and body into the slot - Reframe MuxVideo src vs source: source preferred in React, src an escape hatch; keep them as peers in HTML - Plainer language for the sourcechange note and accessibility status announcer copy - Apply writing-style dash guidance: colons/commas for lists and examples, keep em-dashes where warranted - Verbatim reviewer-suggested lines for the cast/mux-data cards and the MuxData reference intro Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012cpFELzH6kxpPnG95VirsA
decepulis
commented
Jul 31, 2026
decepulis
left a comment
decepulis
left a comment
Collaborator
Author
There was a problem hiding this comment.
one last change
Comment on lines
+28
to
+73
| ## Load a source | ||
|
|
||
| MuxVideo takes Mux content two ways: a structured `source` object, or a stream URL through `src`. | ||
|
|
||
| <FrameworkCase frameworks={["react"]}> | ||
| Prefer `source`. It's typed, so you get autocomplete and type checking on the playback ID and playback params, and MuxVideo builds the URL for you. Reach for `src` as an escape hatch when you already have a Mux HLS URL as a string. | ||
| </FrameworkCase> | ||
|
|
||
| <FrameworkCase frameworks={["html"]}> | ||
| `src` and `source` are peers. Use `src` when you have a Mux HLS URL, or `source` to build one from its parts. | ||
| </FrameworkCase> | ||
|
|
||
| `src` takes a Mux HLS URL. MuxVideo parses the playback ID and query params out of it into `source`; a non-Mux URL passes through unchanged. | ||
|
|
||
| <FrameworkCase frameworks={["react"]}> | ||
| ```tsx | ||
| <MuxVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" /> | ||
| ``` | ||
| </FrameworkCase> | ||
|
|
||
| <FrameworkCase frameworks={["html"]}> | ||
| ```html | ||
| <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-video> | ||
| ``` | ||
| </FrameworkCase> | ||
|
|
||
| `source` builds the URL for you from a playback ID, an optional custom domain, and typed `playback` params (serialized to `snake_case` query params). Setting `source` derives `src`; setting `src` re-derives `source`. It's an object, so in HTML it's a property with no matching attribute. | ||
|
|
||
| <FrameworkCase frameworks={["react"]}> | ||
| ```tsx | ||
| <MuxVideo source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM', playback: { maxResolution: '1080p' } }} /> | ||
| ``` | ||
| </FrameworkCase> | ||
|
|
||
| <FrameworkCase frameworks={["html"]}> | ||
| ```ts | ||
| const video = document.querySelector('mux-video'); | ||
| video.source = { | ||
| playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM', | ||
| customDomain: 'media.example.com', | ||
| playback: { maxResolution: '1080p' }, | ||
| }; | ||
| ``` | ||
| </FrameworkCase> | ||
|
|
||
| MuxVideo fires a `sourcechange` event when the source actually changes, whether you set `source` directly or assign a new `src`. Setting the same values again, like a fresh object on a React re-render, doesn't fire it. |
Collaborator
Author
There was a problem hiding this comment.
Github isn't the best IDE, so I might've made a mistake, but, here. Let me just write this for you the way I'd write it.
Suggested change
| ## Load a source | |
| MuxVideo takes Mux content two ways: a structured `source` object, or a stream URL through `src`. | |
| <FrameworkCase frameworks={["react"]}> | |
| Prefer `source`. It's typed, so you get autocomplete and type checking on the playback ID and playback params, and MuxVideo builds the URL for you. Reach for `src` as an escape hatch when you already have a Mux HLS URL as a string. | |
| </FrameworkCase> | |
| <FrameworkCase frameworks={["html"]}> | |
| `src` and `source` are peers. Use `src` when you have a Mux HLS URL, or `source` to build one from its parts. | |
| </FrameworkCase> | |
| `src` takes a Mux HLS URL. MuxVideo parses the playback ID and query params out of it into `source`; a non-Mux URL passes through unchanged. | |
| <FrameworkCase frameworks={["react"]}> | |
| ```tsx | |
| <MuxVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" /> | |
| ``` | |
| </FrameworkCase> | |
| <FrameworkCase frameworks={["html"]}> | |
| ```html | |
| <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-video> | |
| ``` | |
| </FrameworkCase> | |
| `source` builds the URL for you from a playback ID, an optional custom domain, and typed `playback` params (serialized to `snake_case` query params). Setting `source` derives `src`; setting `src` re-derives `source`. It's an object, so in HTML it's a property with no matching attribute. | |
| <FrameworkCase frameworks={["react"]}> | |
| ```tsx | |
| <MuxVideo source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM', playback: { maxResolution: '1080p' } }} /> | |
| ``` | |
| </FrameworkCase> | |
| <FrameworkCase frameworks={["html"]}> | |
| ```ts | |
| const video = document.querySelector('mux-video'); | |
| video.source = { | |
| playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM', | |
| customDomain: 'media.example.com', | |
| playback: { maxResolution: '1080p' }, | |
| }; | |
| ``` | |
| </FrameworkCase> | |
| MuxVideo fires a `sourcechange` event when the source actually changes, whether you set `source` directly or assign a new `src`. Setting the same values again, like a fresh object on a React re-render, doesn't fire it. | |
| ## Load a source | |
| <FrameworkCase frameworks={["react"]}> | |
| The `source` param builds the URL for you from a playback ID, an optional custom domain, and `playback` params. Playback params are just camelCased [Mux playback query params](https://www.mux.com/docs/api-reference/stream/streaming/get-hls-manifest); for example, `max_resolution` becomes `maxResolution`. | |
| ```tsx | |
| <MuxVideo | |
| source={{ | |
| playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM', | |
| customDomain: 'media.example.com', | |
| playback: { maxResolution: '1080p' } | |
| }} | |
| /> | |
| ``` | |
| If for some reason you need a bit more control, you can use the `src` param with a plain 'ol URL, too: | |
| ```tsx | |
| <MuxVideo | |
| src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" | |
| /> | |
| ``` | |
| MuxVideo fires a `sourcechange` event when the source actually changes. Setting the same values again, like a fresh object on a React re-render, doesn't fire it. | |
| </FrameworkCase> | |
| <FrameworkCase frameworks={["html"]}> | |
| MuxVideo takes Mux content two ways: a stream URL through `src`, or a structured `source` object. | |
| ```html | |
| <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-video> | |
| ``` | |
| The `source` object builds the URL for you from a playback ID, an optional custom domain, and `playback` params. Playback params are just camelCased [Mux playback query params](https://www.mux.com/docs/api-reference/stream/streaming/get-hls-manifest); for example, `max_resolution` becomes `maxResolution`. | |
| ```ts | |
| const video = document.querySelector('mux-video'); | |
| video.source = { | |
| playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM', | |
| customDomain: 'media.example.com', | |
| playback: { maxResolution: '1080p' }, | |
| }; | |
| ``` | |
| MuxVideo fires a `sourcechange` event when the source actually changes. Setting the same values again doesn't fire it. | |
| </FrameworkCase> |
Apply reviewer suggestion to split source/src guidance per framework, leading with source in React and treating src/source as peers in HTML.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Darius Cepulis · Slack thread
Before — mux-data and google-cast were documented only as concept guides, with their config options buried in the explanation and no API-reference pages, so they never appeared in the reference sidebar. The mux-video reference embedded the generated props table but had no prose for the new
srcvssourceloading modes, thumbnails/storyboards, or signed playback. The accessibility guide didn't mention the screen-reader status announcer.After — mux-data and google-cast each get a dedicated API-reference page (anatomy + options tables), listed under Components in the sidebar. The concept guides keep the "how it works" narrative and link out to the references for options. The mux-video reference explains
src/source,sourcechange, derived thumbnails/storyboards, and signed-playback token rules. The accessibility guide documents the live-region status announcer and the accessible player-container attributes.How — mux-data/google-cast are non-rendering
MediaComponentElements that the api-docs builder doesn't scan, so their options tables are hand-authored from the prop definitions (a follow-up issue tracks replacing them post-GA). Concept edits move options into the references and tighten prose to Diátaxis explanation mode. mux-video and accessibility additions are drawn from #1850 and #1659 and verified against source.Note
Low Risk
Documentation and navigation changes only; no application or player runtime code in the diff.
Overview
Adds dedicated API reference pages for
GoogleCastandMuxData(anatomy + hand-authored options tables) and registers them under Components in the docs sidebar. The Google Cast and Mux Data concept guides keep the narrative but drop inlined option tables, pointing readers to those references instead; Cast configuration is consolidated into fewer examples.The accessibility concept guide now documents the focusable, labeled player container (
role="group") and a new Status announcements section describing therole="status"live region (confirmed store state, debouncing, quiet while sliders are focused).The MuxVideo reference gains prose for
srcvssource,sourcechange, derived thumbnail/storyboard URLs, and signed playback token rules. Minor copy tweaks and DocsLinkCarddescriptionprops appear across related pages.Reviewed by Cursor Bugbot for commit 6450531. Bugbot is set up for automated code reviews on this repo. Configure here.