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.

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	5f6fe96
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a3ae93c35c06d000823d00b
😎 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 23, 2026 8:15pm

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html

Path	Base initial	PR initial	Diff	%	Lazy
/video/minimal-skin.css	—	5.45 kB	—		—	🆕
/video/skin.css	—	5.43 kB	—		—	🆕
/video/minimal-skin	—	44.01 kB	—		—	🆕
/video/minimal-skin.tailwind	—	44.58 kB	—		—	🆕
/video/player	—	8.07 kB	—		—	🆕
/video/skin	—	44.28 kB	—		—	🆕
/video/skin.tailwind	—	44.98 kB	—		—	🆕
/audio/minimal-skin.css	—	3.60 kB	—		—	🆕
/audio/skin.css	—	3.53 kB	—		—	🆕
/audio/minimal-skin	—	36.62 kB	—		—	🆕
/audio/minimal-skin.tailwind	—	37.04 kB	—		—	🆕
/audio/player	—	5.38 kB	—		—	🆕
/audio/skin	—	37.80 kB	—		—	🆕
/audio/skin.tailwind	—	38.25 kB	—		—	🆕
/background/skin.css	—	133 B	—		—	🆕
/background/player	—	3.92 kB	—		—	🆕
/background/skin	—	1.14 kB	—		—	🆕
/live-video/minimal-skin.css	—	5.45 kB	—		—	🆕
/live-video/skin.css	—	5.43 kB	—		—	🆕
/live-video/minimal-skin	—	43.12 kB	—		—	🆕
/live-video/minimal-skin.tailwind	—	43.58 kB	—		—	🆕
/live-video/player	—	7.64 kB	—		—	🆕
/live-video/skin	—	43.08 kB	—		—	🆕
/live-video/skin.tailwind	—	43.58 kB	—		—	🆕
/live-audio/minimal-skin.css	—	3.60 kB	—		—	🆕
/live-audio/skin.css	—	3.53 kB	—		—	🆕
/live-audio/minimal-skin	—	29.73 kB	—		—	🆕
/live-audio/minimal-skin.tailwind	—	29.20 kB	—		—	🆕
/live-audio/player	—	5.39 kB	—		—	🆕
/live-audio/skin	—	31.04 kB	—		—	🆕
/live-audio/skin.tailwind	—	30.66 kB	—		—	🆕
/ui/airplay-button	—	9.38 kB	—		—	🆕
/ui/alert-dialog	—	4.05 kB	—		—	🆕
/ui/alert-dialog-close	—	1.94 kB	—		—	🆕
/ui/alert-dialog-description	—	1.61 kB	—		—	🆕
/ui/alert-dialog-title	—	1.60 kB	—		—	🆕
/ui/buffering-indicator	—	7.40 kB	—		—	🆕
/ui/captions-button	—	9.65 kB	—		—	🆕
/ui/captions-radio-group	—	9.08 kB	—		—	🆕
/ui/cast-button	—	9.37 kB	—		—	🆕
/ui/compounds	—	27.90 kB	—		—	🆕
/ui/controls	—	7.55 kB	—		—	🆕
/ui/error-dialog	—	9.12 kB	—		—	🆕
/ui/fullscreen-button	—	9.35 kB	—		—	🆕
/ui/hotkey	—	8.69 kB	—		—	🆕
/ui/menu	—	17.24 kB	—		—	🆕
/ui/mute-button	—	9.36 kB	—		—	🆕
/ui/pip-button	—	9.35 kB	—		—	🆕
/ui/play-button	—	9.36 kB	—		—	🆕
/ui/playback-rate-button	—	9.60 kB	—		—	🆕
/ui/playback-rate-radio-group	—	9.00 kB	—		—	🆕
/ui/popover	—	6.57 kB	—		—	🆕
/ui/poster	—	7.08 kB	—		—	🆕
/ui/quality-radio-group	—	9.60 kB	—		—	🆕
/ui/seek-button	—	9.42 kB	—		—	🆕
/ui/seek-indicator	—	10.75 kB	—		—	🆕
/ui/seek-indicator-value	—	1.01 kB	—		—	🆕
/ui/slider	—	5.13 kB	—		—	🆕
/ui/status-announcer	—	9.94 kB	—		—	🆕
/ui/status-indicator	—	10.85 kB	—		—	🆕
/ui/status-indicator-value	—	1.03 kB	—		—	🆕
/ui/thumbnail	—	8.52 kB	—		—	🆕
/ui/time	—	7.93 kB	—		—	🆕
/ui/time-slider	—	12.40 kB	—		—	🆕
/ui/tooltip	—	7.10 kB	—		—	🆕
/ui/volume-indicator	—	10.86 kB	—		—	🆕
/ui/volume-indicator-fill	—	1.02 kB	—		—	🆕
/ui/volume-indicator-value	—	1.02 kB	—		—	🆕
/ui/volume-slider	—	10.64 kB	—		—	🆕
/media/background-video	—	1.14 kB	—		—	🆕
/media/container	—	1.72 kB	—		—	🆕
/media/dash-video	—	214.74 kB	—		—	🆕
/media/hls-video	—	141.27 kB	—		—	🆕
/media/mux-audio	—	163.91 kB	—		—	🆕
/media/mux-video	—	163.68 kB	—		—	🆕
/media/native-hls-video	—	9.05 kB	—		—	🆕
/media/simple-hls-audio-only	—	17.15 kB	—		—	🆕
/media/simple-hls-video	—	18.69 kB	—		—	🆕
/media/vimeo-video	—	12.31 kB	—		—	🆕
/global.css	—	176 B	—		—	🆕
/shared.css	—	88 B	—		—	🆕
/tailwind.css	—	228 B	—		—	🆕
/skin-element	—	1.44 kB	—		—	🆕
/video (default)	—	44.32 kB	—		—	🆕
/video (default + hls)	—	183.79 kB	—		—	🆕
/video (minimal)	—	43.98 kB	—		—	🆕
/video (minimal + hls)	—	183.63 kB	—		—	🆕
/audio (default)	—	37.83 kB	—		—	🆕
/audio (minimal)	—	36.61 kB	—		—	🆕
/background	—	4.20 kB	—		—	🆕

Presets (7)

Entry	Initial
/video (default)	44.32 kB
/video (default + hls)	183.79 kB
/video (minimal)	43.98 kB
/video (minimal + hls)	183.63 kB
/audio (default)	37.83 kB
/audio (minimal)	36.61 kB
/background	4.20 kB

Media (10)

Entry	Initial
/media/background-video	1.14 kB
/media/container	1.72 kB
/media/dash-video	214.74 kB
/media/hls-video	141.27 kB
/media/mux-audio	163.91 kB
/media/mux-video	163.68 kB
/media/native-hls-video	9.05 kB
/media/simple-hls-audio-only	17.15 kB
/media/simple-hls-video	18.69 kB
/media/vimeo-video	12.31 kB

Players (5)

Entry	Initial
/video/player	8.07 kB
/audio/player	5.38 kB
/background/player	3.92 kB
/live-video/player	7.64 kB
/live-audio/player	5.39 kB

Skins (30)

Entry	Type	Initial
/video/minimal-skin.css	css	5.45 kB
/video/skin.css	css	5.43 kB
/video/minimal-skin	js	44.01 kB
/video/minimal-skin.tailwind	js	44.58 kB
/video/skin	js	44.28 kB
/video/skin.tailwind	js	44.98 kB
/audio/minimal-skin.css	css	3.60 kB
/audio/skin.css	css	3.53 kB
/audio/minimal-skin	js	36.62 kB
/audio/minimal-skin.tailwind	js	37.04 kB
/audio/skin	js	37.80 kB
/audio/skin.tailwind	js	38.25 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.12 kB
/live-video/minimal-skin.tailwind	js	43.58 kB
/live-video/skin	js	43.08 kB
/live-video/skin.tailwind	js	43.58 kB
/live-audio/minimal-skin.css	css	3.60 kB
/live-audio/skin.css	css	3.53 kB
/live-audio/minimal-skin	js	29.73 kB
/live-audio/minimal-skin.tailwind	js	29.20 kB
/live-audio/skin	js	31.04 kB
/live-audio/skin.tailwind	js	30.66 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	Initial
/ui/airplay-button	2.29 kB
/ui/alert-dialog	2.45 kB
/ui/alert-dialog-close	2.15 kB
/ui/alert-dialog-description	2.18 kB
/ui/alert-dialog-title	2.17 kB
/ui/buffering-indicator	2.24 kB
/ui/captions-button	2.37 kB
/ui/captions-radio-group	2.73 kB
/ui/cast-button	2.25 kB
/ui/compounds	2.85 kB
/ui/controls	2.58 kB
/ui/error-dialog	2.61 kB
/ui/fullscreen-button	2.29 kB
/ui/hotkey	2.31 kB
/ui/menu	2.63 kB
/ui/mute-button	2.27 kB
/ui/pip-button	2.28 kB
/ui/play-button	2.28 kB
/ui/playback-rate-button	2.36 kB
/ui/playback-rate-radio-group	2.78 kB
/ui/popover	2.64 kB
/ui/poster	2.14 kB
/ui/quality-radio-group	2.75 kB
/ui/seek-button	2.27 kB
/ui/seek-indicator	2.29 kB
/ui/seek-indicator-value	465 B
/ui/slider	2.62 kB
/ui/status-announcer	2.28 kB
/ui/status-indicator	2.36 kB
/ui/status-indicator-value	467 B
/ui/thumbnail	2.09 kB
/ui/time	2.60 kB
/ui/time-slider	2.64 kB
/ui/tooltip	2.59 kB
/ui/volume-indicator	2.36 kB
/ui/volume-indicator-fill	410 B
/ui/volume-indicator-value	426 B
/ui/volume-slider	2.64 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

Path	Base initial	PR initial	Diff	%	Lazy
/tailwind.css	—	228 B	—		—	🆕
/media/background-video	—	575 B	—		—	🆕
/media/dash-video	—	213.24 kB	—		—	🆕
/media/hls-video	—	139.80 kB	—		—	🆕
/media/mux-audio	—	162.26 kB	—		—	🆕
/media/mux-video	—	162.26 kB	—		—	🆕
/media/native-hls-video	—	7.39 kB	—		—	🆕
/media/simple-hls-audio-only	—	15.56 kB	—		—	🆕
/media/simple-hls-video	—	17.15 kB	—		—	🆕
/media/vimeo-video	—	10.58 kB	—		—	🆕
/video/minimal-skin.css	—	5.37 kB	—		—	🆕
/video/skin.css	—	5.34 kB	—		—	🆕
/video/minimal-skin	—	36.81 kB	—		—	🆕
/video/minimal-skin.tailwind	—	42.58 kB	—		—	🆕
/video/skin	—	36.73 kB	—		—	🆕
/video/skin.tailwind	—	42.51 kB	—		—	🆕
/audio/minimal-skin.css	—	3.47 kB	—		—	🆕
/audio/skin.css	—	3.39 kB	—		—	🆕
/audio/minimal-skin	—	29.98 kB	—		—	🆕
/audio/minimal-skin.tailwind	—	31.76 kB	—		—	🆕
/audio/skin	—	29.91 kB	—		—	🆕
/audio/skin.tailwind	—	33.75 kB	—		—	🆕
/background/skin.css	—	90 B	—		—	🆕
/background/skin	—	272 B	—		—	🆕
/live-video/minimal-skin.css	—	5.37 kB	—		—	🆕
/live-video/skin.css	—	5.34 kB	—		—	🆕
/live-video/minimal-skin	—	32.56 kB	—		—	🆕
/live-video/minimal-skin.tailwind	—	38.22 kB	—		—	🆕
/live-video/skin	—	32.58 kB	—		—	🆕
/live-video/skin.tailwind	—	38.24 kB	—		—	🆕
/live-audio/minimal-skin.css	—	3.47 kB	—		—	🆕
/live-audio/skin.css	—	3.39 kB	—		—	🆕
/live-audio/minimal-skin	—	21.74 kB	—		—	🆕
/live-audio/minimal-skin.tailwind	—	24.64 kB	—		—	🆕
/live-audio/skin	—	21.78 kB	—		—	🆕
/live-audio/skin.tailwind	—	24.78 kB	—		—	🆕
/ui/airplay-button	—	8.75 kB	—		—	🆕
/ui/alert-dialog	—	3.16 kB	—		—	🆕
/ui/buffering-indicator	—	6.77 kB	—		—	🆕
/ui/captions-button	—	8.76 kB	—		—	🆕
/ui/captions-radio-group	—	6.45 kB	—		—	🆕
/ui/cast-button	—	8.78 kB	—		—	🆕
/ui/controls	—	6.50 kB	—		—	🆕
/ui/error-dialog	—	8.28 kB	—		—	🆕
/ui/fullscreen-button	—	8.76 kB	—		—	🆕
/ui/gesture	—	6.96 kB	—		—	🆕
/ui/hotkey	—	7.45 kB	—		—	🆕
/ui/live-button	—	7.29 kB	—		—	🆕
/ui/menu	—	17.31 kB	—		—	🆕
/ui/mute-button	—	8.76 kB	—		—	🆕
/ui/pip-button	—	8.76 kB	—		—	🆕
/ui/play-button	—	8.75 kB	—		—	🆕
/ui/playback-rate	—	6.34 kB	—		—	🆕
/ui/playback-rate-button	—	8.78 kB	—		—	🆕
/ui/popover	—	6.32 kB	—		—	🆕
/ui/poster	—	6.40 kB	—		—	🆕
/ui/quality	—	6.86 kB	—		—	🆕
/ui/seek-button	—	8.81 kB	—		—	🆕
/ui/seek-indicator	—	10.20 kB	—		—	🆕
/ui/slider	—	10.84 kB	—		—	🆕
/ui/status-announcer	—	9.38 kB	—		—	🆕
/ui/status-indicator	—	10.28 kB	—		—	🆕
/ui/thumbnail	—	7.61 kB	—		—	🆕
/ui/time	—	7.19 kB	—		—	🆕
/ui/time-slider	—	10.11 kB	—		—	🆕
/ui/tooltip	—	6.98 kB	—		—	🆕
/ui/volume-indicator	—	10.35 kB	—		—	🆕
/ui/volume-slider	—	9.91 kB	—		—	🆕
/video (default)	—	36.83 kB	—		—	🆕
/video (default + hls)	—	175.18 kB	—		—	🆕
/video (minimal)	—	36.91 kB	—		—	🆕
/video (minimal + hls)	—	175.13 kB	—		—	🆕
/audio (default)	—	29.97 kB	—		—	🆕
/audio (minimal)	—	30.04 kB	—		—	🆕
/background	—	754 B	—		—	🆕

Presets (7)

Entry	Initial
/video (default)	36.83 kB
/video (default + hls)	175.18 kB
/video (minimal)	36.91 kB
/video (minimal + hls)	175.13 kB
/audio (default)	29.97 kB
/audio (minimal)	30.04 kB
/background	754 B

Media (9)

Entry	Initial
/media/background-video	575 B
/media/dash-video	213.24 kB
/media/hls-video	139.80 kB
/media/mux-audio	162.26 kB
/media/mux-video	162.26 kB
/media/native-hls-video	7.39 kB
/media/simple-hls-audio-only	15.56 kB
/media/simple-hls-video	17.15 kB
/media/vimeo-video	10.58 kB

Skins (27)

Entry	Type	Initial
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.37 kB
/video/skin.css	css	5.34 kB
/video/minimal-skin	js	36.81 kB
/video/minimal-skin.tailwind	js	42.58 kB
/video/skin	js	36.73 kB
/video/skin.tailwind	js	42.51 kB
/audio/minimal-skin.css	css	3.47 kB
/audio/skin.css	css	3.39 kB
/audio/minimal-skin	js	29.98 kB
/audio/minimal-skin.tailwind	js	31.76 kB
/audio/skin	js	29.91 kB
/audio/skin.tailwind	js	33.75 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.56 kB
/live-video/minimal-skin.tailwind	js	38.22 kB
/live-video/skin	js	32.58 kB
/live-video/skin.tailwind	js	38.24 kB
/live-audio/minimal-skin.css	css	3.47 kB
/live-audio/skin.css	css	3.39 kB
/live-audio/minimal-skin	js	21.74 kB
/live-audio/minimal-skin.tailwind	js	24.64 kB
/live-audio/skin	js	21.78 kB
/live-audio/skin.tailwind	js	24.78 kB

UI Components (32)

Entry	Initial
/ui/airplay-button	2.23 kB
/ui/alert-dialog	2.20 kB
/ui/buffering-indicator	2.10 kB
/ui/captions-button	2.16 kB
/ui/captions-radio-group	2.09 kB
/ui/cast-button	2.19 kB
/ui/controls	2.05 kB
/ui/error-dialog	2.24 kB
/ui/fullscreen-button	2.26 kB
/ui/gesture	2.25 kB
/ui/hotkey	2.27 kB
/ui/live-button	2.12 kB
/ui/menu	2.43 kB
/ui/mute-button	2.24 kB
/ui/pip-button	2.26 kB
/ui/play-button	2.19 kB
/ui/playback-rate	2.06 kB
/ui/playback-rate-button	2.25 kB
/ui/popover	2.64 kB
/ui/poster	2.09 kB
/ui/quality	2.10 kB
/ui/seek-button	2.20 kB
/ui/seek-indicator	2.19 kB
/ui/slider	2.26 kB
/ui/status-announcer	2.11 kB
/ui/status-indicator	2.15 kB
/ui/thumbnail	2.00 kB
/ui/time	2.05 kB
/ui/time-slider	2.29 kB
/ui/tooltip	2.59 kB
/ui/volume-indicator	2.18 kB
/ui/volume-slider	2.30 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

Path	Base initial	PR initial	Diff	%	Lazy
.	—	9.08 kB	—		—	🆕
/dom	—	17.02 kB	—		—	🆕
/dom/media/custom-media-element	—	2.09 kB	—		—	🆕
/dom/media/dash	—	209.07 kB	—		—	🆕
/dom/media/google-cast	—	4.04 kB	—		—	🆕
/dom/media/hls	—	135.63 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.05 kB	—		—	🆕
/dom/media/simple-hls	—	16.47 kB	—		—	🆕
/dom/media/simple-hls-audio-only	—	14.92 kB	—		—	🆕
/dom/media/vimeo	—	9.86 kB	—		—	🆕
/media/predicate	—	573 B	—		—	🆕

Entries (14)

Entry	Initial
.	9.08 kB
/dom	17.02 kB
/dom/media/custom-media-element	2.09 kB
/dom/media/dash	209.07 kB
/dom/media/google-cast	4.04 kB
/dom/media/hls	135.63 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.05 kB
/dom/media/simple-hls	16.47 kB
/dom/media/simple-hls-audio-only	14.92 kB
/dom/media/vimeo	9.86 kB
/media/predicate	573 B

🏷️ @videojs/element

Path	Base initial	PR initial	Diff	%	Lazy
.	—	996 B	—		—	🆕
/context	—	943 B	—		—	🆕

Entries (2)

Entry	Initial
.	996 B
/context	943 B

📦 @videojs/store

Path	Base initial	PR initial	Diff	%	Lazy
.	—	1.39 kB	—		—	🆕
/html	—	696 B	—		—	🆕
/react	—	360 B	—		—	🆕

Entries (3)

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

🔧 @videojs/utils

Path	Base initial	PR initial	Diff	%	Lazy
/array	—	104 B	—		—	🆕
/dom	—	2.26 kB	—		—	🆕
/events	—	319 B	—		—	🆕
/function	—	327 B	—		—	🆕
/object	—	275 B	—		—	🆕
/predicate	—	265 B	—		—	🆕
/string	—	231 B	—		—	🆕
/style	—	190 B	—		—	🆕
/time	—	478 B	—		—	🆕
/number	—	158 B	—		—	🆕

Entries (10)

Entry	Initial
/array	104 B
/dom	2.26 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	231 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf

Path	Base initial	PR initial	Diff	%	Lazy
.	—	4.45 kB	—		—	🆕
/dom	—	6.33 kB	—		—	🆕
/hls	—	15.37 kB	—		—	🆕
/background-looping-video	—	12.90 kB	—		—	🆕

Entries (4)

Entry	Initial
.	4.45 kB
/dom	6.33 kB
/hls	15.37 kB
/background-looping-video	12.90 kB

---

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

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

Run pnpm size locally to check current initial sizes.