docs(docs): add media chrome migration guide

[luwes]

Refs #1408

Summary

Adds a concise draft migration guide for users moving from Media Chrome to Video.js v10. Lives in internal/migrations/ as a draft pending verification and porting to the docs site.

Changes

• Frames the migration as mostly rename-and-reshape, since Video.js v10's HTML player shares Media Chrome's media-* custom-element convention
• Element mapping table covering the non-obvious renames (media-time-range → media-time-slider, media-loading-indicator → media-buffering-indicator, menus → radio groups, etc.)
• Before/after for the controller model (media-controller + slot="media" → video-player + media-container) and the React story (media-chrome/react wrappers → native @videojs/react components with the render prop)
• State-styling rewrite (media* attributes → data-*) and themes → skins/presets
• Known-gap callouts linking Feature: Remove Native Controls When Custom Control Is Loaded #1160 (native controls) and Feature: Add Support for VideoTracks #1163 (videoTracks)

Testing

Docs-only draft; no tests. Examples are grounded in existing demo sources and confirmed element/component exports.

Follow-ups before publishing

• Pin down exact media-seek-button direction and media-time display attribute names
• Port to site/src/content/docs/how-to/migrate-from-media-chrome.mdx with sidebar entry and MDX components (DocsLink, Aside, framework cases)

---

Note

Low Risk
Documentation-only addition under internal/migrations/ with no runtime or API changes.

Overview
Adds a draft migration guide at internal/migrations/media-chrome.md for apps that compose players from Media Chrome elements (not <mux-player>).

The doc positions v10 as mostly rename-and-reshape: controller split (media-controller + slotted video → video-player + media-container), a table of non-obvious element renames (sliders, time display, menus → radio groups, seek buttons), CSS state selectors (media* attributes → data-*), and themes → skins/presets. It includes HTML before/after, a React example using createPlayer and the render prop, and known gaps with links to #1160 and #1163.

^{Reviewed by Cursor Bugbot for commit 083952c. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	083952c
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a3463f49b51050008b66c98
😎 Deploy Preview	https://deploy-preview-1706--vjs10-site.netlify.app
📱 Preview on mobile	Toggle 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]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 18, 2026 9:32pm

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	44.92 kB
/video (default + hls)	184.43 kB
/video (minimal)	44.64 kB
/video (minimal + hls)	184.27 kB
/audio (default)	38.38 kB
/audio (minimal)	37.21 kB
/background	4.20 kB

Media (10)

Entry	Size
/media/background-video	1.14 kB
/media/container	1.72 kB
/media/dash-video	242.77 kB
/media/hls-video	141.27 kB
/media/mux-audio	163.93 kB
/media/mux-video	163.77 kB
/media/native-hls-video	9.06 kB
/media/simple-hls-audio-only	17.00 kB
/media/simple-hls-video	18.76 kB
/media/vimeo-video	12.32 kB

Players (5)

Entry	Size
/video/player	8.06 kB
/audio/player	5.38 kB
/background/player	3.93 kB
/live-video/player	7.63 kB
/live-audio/player	5.39 kB

Skins (30)

Entry	Type	Size
/video/minimal-skin.css	css	5.45 kB
/video/skin.css	css	5.43 kB
/video/minimal-skin	js	44.61 kB
/video/minimal-skin.tailwind	js	45.16 kB
/video/skin	js	44.91 kB
/video/skin.tailwind	js	45.53 kB
/audio/minimal-skin.css	css	3.60 kB
/audio/skin.css	css	3.53 kB
/audio/minimal-skin	js	37.21 kB
/audio/minimal-skin.tailwind	js	37.59 kB
/audio/skin	js	38.42 kB
/audio/skin.tailwind	js	38.77 kB
/background/skin.css	css	133 B
/background/skin	js	1.14 kB
/live-video/minimal-skin.css	css	5.45 kB
/live-video/skin.css	css	5.43 kB
/live-video/minimal-skin	js	43.70 kB
/live-video/minimal-skin.tailwind	js	44.14 kB
/live-video/skin	js	43.67 kB
/live-video/skin.tailwind	js	44.21 kB
/live-audio/minimal-skin.css	css	3.60 kB
/live-audio/skin.css	css	3.53 kB
/live-audio/minimal-skin	js	30.15 kB
/live-audio/minimal-skin.tailwind	js	29.64 kB
/live-audio/skin	js	31.50 kB
/live-audio/skin.tailwind	js	31.12 kB
/global.css	css	176 B
/shared.css	css	88 B
/tailwind.css	css	228 B
/skin-element	js	1.44 kB

UI Components (38)

Entry	Size
/ui/airplay-button	3.66 kB
/ui/alert-dialog	1.32 kB
/ui/alert-dialog-close	524 B
/ui/alert-dialog-description	483 B
/ui/alert-dialog-title	405 B
/ui/buffering-indicator	2.33 kB
/ui/captions-button	3.76 kB
/ui/captions-radio-group	3.36 kB
/ui/cast-button	3.73 kB
/ui/compounds	8.75 kB
/ui/controls	2.38 kB
/ui/error-dialog	3.47 kB
/ui/fullscreen-button	3.65 kB
/ui/hotkey	2.19 kB
/ui/menu	5.05 kB
/ui/mute-button	3.69 kB
/ui/pip-button	3.69 kB
/ui/play-button	3.74 kB
/ui/playback-rate-button	3.72 kB
/ui/playback-rate-radio-group	3.15 kB
/ui/popover	2.00 kB
/ui/poster	2.35 kB
/ui/quality-radio-group	2.31 kB
/ui/seek-button	3.71 kB
/ui/seek-indicator	3.88 kB
/ui/seek-indicator-value	235 B
/ui/slider	1.56 kB
/ui/status-announcer	3.62 kB
/ui/status-indicator	3.74 kB
/ui/status-indicator-value	237 B
/ui/thumbnail	3.30 kB
/ui/time	3.17 kB
/ui/time-slider	4.04 kB
/ui/tooltip	2.14 kB
/ui/volume-indicator	3.94 kB
/ui/volume-indicator-fill	176 B
/ui/volume-indicator-value	166 B
/ui/volume-slider	2.96 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	37.38 kB
/video (default + hls)	175.59 kB
/video (minimal)	37.50 kB
/video (minimal + hls)	175.83 kB
/audio (default)	30.57 kB
/audio (minimal)	30.62 kB
/background	754 B

Media (9)

Entry	Size
/media/background-video	575 B
/media/dash-video	241.00 kB
/media/hls-video	139.68 kB
/media/mux-audio	162.21 kB
/media/mux-video	162.28 kB
/media/native-hls-video	7.41 kB
/media/simple-hls-audio-only	15.37 kB
/media/simple-hls-video	17.18 kB
/media/vimeo-video	10.58 kB

Skins (27)

Entry	Type	Size
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.37 kB
/video/skin.css	css	5.34 kB
/video/minimal-skin	js	37.42 kB
/video/minimal-skin.tailwind	js	43.10 kB
/video/skin	js	37.39 kB
/video/skin.tailwind	js	43.10 kB
/audio/minimal-skin.css	css	3.47 kB
/audio/skin.css	css	3.39 kB
/audio/minimal-skin	js	30.56 kB
/audio/minimal-skin.tailwind	js	32.36 kB
/audio/skin	js	30.54 kB
/audio/skin.tailwind	js	34.36 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	5.37 kB
/live-video/skin.css	css	5.34 kB
/live-video/minimal-skin	js	32.92 kB
/live-video/minimal-skin.tailwind	js	38.51 kB
/live-video/skin	js	32.94 kB
/live-video/skin.tailwind	js	38.58 kB
/live-audio/minimal-skin.css	css	3.47 kB
/live-audio/skin.css	css	3.39 kB
/live-audio/minimal-skin	js	21.98 kB
/live-audio/minimal-skin.tailwind	js	24.86 kB
/live-audio/skin	js	22.04 kB
/live-audio/skin.tailwind	js	25.02 kB

UI Components (32)

Entry	Size
/ui/airplay-button	3.08 kB
/ui/alert-dialog	1.25 kB
/ui/buffering-indicator	2.55 kB
/ui/captions-button	3.11 kB
/ui/captions-radio-group	2.83 kB
/ui/cast-button	2.76 kB
/ui/controls	2.52 kB
/ui/error-dialog	2.72 kB
/ui/fullscreen-button	2.75 kB
/ui/gesture	2.20 kB
/ui/hotkey	2.39 kB
/ui/live-button	3.33 kB
/ui/menu	6.79 kB
/ui/mute-button	2.75 kB
/ui/pip-button	3.10 kB
/ui/play-button	2.79 kB
/ui/playback-rate	2.85 kB
/ui/playback-rate-button	2.73 kB
/ui/popover	2.48 kB
/ui/poster	2.40 kB
/ui/quality	3.03 kB
/ui/seek-button	2.72 kB
/ui/seek-indicator	2.31 kB
/ui/slider	3.62 kB
/ui/status-announcer	2.49 kB
/ui/status-indicator	2.18 kB
/ui/thumbnail	2.75 kB
/ui/time	3.27 kB
/ui/time-slider	4.28 kB
/ui/tooltip	2.43 kB
/ui/volume-indicator	2.19 kB
/ui/volume-slider	3.63 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (67)

Entry	Size
.	10.05 kB
/dom	17.11 kB
/dom/media/custom-media-element	2.09 kB
/dom/media/dash	236.79 kB
/dom/media/google-cast	4.03 kB
/dom/media/hls	135.73 kB
/dom/media/media-host	1.25 kB
/dom/media/media-played-ranges	576 B
/dom/media/mux	151.26 kB
/dom/media/native-hls	3.07 kB
/dom/media/simple-hls	16.55 kB
/dom/media/simple-hls-audio-only	14.79 kB
/dom/media/vimeo	9.86 kB
/i18n	29.34 kB
/i18n/locales/all	26.96 kB
/i18n/locales/ar	1017 B
/i18n/locales/az	914 B
/i18n/locales/bg	1.02 kB
/i18n/locales/bn	1.04 kB
/i18n/locales/bs	837 B
/i18n/locales/ca	878 B
/i18n/locales/cs	865 B
/i18n/locales/cy	829 B
/i18n/locales/da	821 B
/i18n/locales/de	916 B
/i18n/locales/el	1.20 kB
/i18n/locales/en	645 B
/i18n/locales/es	829 B
/i18n/locales/et	882 B
/i18n/locales/eu	828 B
/i18n/locales/fa	1008 B
/i18n/locales/fi	856 B
/i18n/locales/fr	896 B
/i18n/locales/gd	917 B
/i18n/locales/gl	816 B
/i18n/locales/he	940 B
/i18n/locales/hi	1.06 kB
/i18n/locales/hr	846 B
/i18n/locales/hu	913 B
/i18n/locales/it	856 B
/i18n/locales/ja	997 B
/i18n/locales/ko	960 B
/i18n/locales/lv	886 B
/i18n/locales/mr	1.07 kB
/i18n/locales/nb	814 B
/i18n/locales/ne	1.06 kB
/i18n/locales/nl	834 B
/i18n/locales/nn	801 B
/i18n/locales/oc	904 B
/i18n/locales/pl	951 B
/i18n/locales/pt	836 B
/i18n/locales/pt-BR	836 B
/i18n/locales/pt-PT	807 B
/i18n/locales/ro	882 B
/i18n/locales/ru	1.10 kB
/i18n/locales/sk	929 B
/i18n/locales/sl	861 B
/i18n/locales/sr	827 B
/i18n/locales/sv	825 B
/i18n/locales/te	1.10 kB
/i18n/locales/th	1.08 kB
/i18n/locales/tr	906 B
/i18n/locales/uk	1.13 kB
/i18n/locales/vi	903 B
/i18n/locales/zh	810 B
/i18n/locales/zh-CN	810 B
/i18n/locales/zh-TW	821 B

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	2.67 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	231 B
/style	190 B
/time	930 B
/number	158 B

📦 @videojs/spf — no changes

Entries (4)

Entry	Size
.	4.45 kB
/dom	6.33 kB
/hls	15.44 kB
/background-looping-video	12.97 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.