docs(site): use createPlayer in React installation code generator

[mihar-22]

Summary

The React installation page code generator referenced nonexistent convenience exports (VideoProvider, AudioProvider, BackgroundVideoProvider). Updated to use the createPlayer factory, matching the actual package API and the pattern used in the skins concept page.

Changes

• Replace convenience provider imports with createPlayer + features from @videojs/react
• Use Player.Provider instead of VideoProvider/AudioProvider/BackgroundVideoProvider
• Import skins and default media from preset subpaths (@videojs/react/video, /audio, /background)
• Import specialized media renderers from @videojs/react/media/* subpaths
• Pass feature presets directly (features.video) without spread

Testing

Verified generated code output for all use case + renderer combinations. Lint and typecheck pass (no new errors).

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-react	Ignored	Preview	Feb 27, 2026 9:27pm

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	0669c1a
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69a20c5287daa600081f1b10
😎 Deploy Preview	https://deploy-preview-634--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[decepulis]

lgtm!

[github-actions]

📦 Bundle Size Report

Package	Size	Diff		%
@videojs/core	6.87 kB	0 B	░░░░░░░░	0%	✅
@videojs/element	1.60 kB	0 B	░░░░░░░░	0%	✅
@videojs/html	9.72 kB	0 B	░░░░░░░░	0%	✅
@videojs/icons	3.79 kB	0 B	░░░░░░░░	0%	✅
@videojs/react	8.79 kB	0 B	░░░░░░░░	0%	✅
@videojs/store	1.94 kB	0 B	░░░░░░░░	0%	✅
@videojs/utils	2.51 kB	0 B	░░░░░░░░	0%	✅

Total: 35.21 kB · 0 B · 0%

---

Entry Breakdown

Subpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.

@videojs/core

Entry	Base	PR	Diff	%
.	3.21 kB	3.21 kB	0 B	0%	✅
./dom	3.65 kB	3.65 kB	0 B	0%	✅
total	6.87 kB	6.87 kB	0 B	0%

@videojs/element

Entry	Base	PR	Diff	%
.	817 B	817 B	0 B	0%	✅
./context	823 B	823 B	0 B	0%	✅
total	1.60 kB	1.60 kB	0 B	0%

@videojs/icons

Entry	Base	PR	Diff	%
./react	2.27 kB	2.27 kB	0 B	0%	✅
./html	1.52 kB	1.52 kB	0 B	0%	✅
total	3.79 kB	3.79 kB	0 B	0%

@videojs/store

Entry	Base	PR	Diff	%
.	1.29 kB	1.29 kB	0 B	0%	✅
./html	468 B	468 B	0 B	0%	✅
./react	199 B	199 B	0 B	0%	✅
total	1.94 kB	1.94 kB	0 B	0%

@videojs/utils

Entry	Base	PR	Diff	%
./array	104 B	104 B	0 B	0%	✅
./dom	725 B	725 B	0 B	0%	✅
./events	227 B	227 B	0 B	0%	✅
./function	197 B	197 B	0 B	0%	✅
./object	119 B	119 B	0 B	0%	✅
./predicate	265 B	265 B	0 B	0%	✅
./string	110 B	110 B	0 B	0%	✅
./style	185 B	185 B	0 B	0%	✅
./time	478 B	478 B	0 B	0%	✅
./number	158 B	158 B	0 B	0%	✅
total	2.51 kB	2.51 kB	0 B	0%

---

ℹ️ How to interpret

Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.

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

Run pnpm size locally to check current sizes.