https://github.com/vcode-sh/vibe-player
https://github.com/vcode-sh/vibe-player
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/vcode-sh/vibe-player
- Owner: vcode-sh
- License: other
- Created: 2026-06-08T18:21:05.000Z (21 days ago)
- Default Branch: main
- Last Pushed: 2026-06-09T15:27:38.000Z (21 days ago)
- Last Synced: 2026-06-11T08:34:04.987Z (19 days ago)
- Language: TypeScript
- Size: 523 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Vibe Player
[](https://www.npmjs.com/package/vibe-player)
[](./LICENSE)
[](https://react.dev/)
[](https://github.com/sponsors/vcode-sh)
Video players are easy, right up until they are not.
`vibe-player` is a cinematic React player package for teams that
want polished playback without inheriting someone else's product app. Files,
HLS, YouTube iframe playback, compliant YouTube external handoff, captions,
keyboard shortcuts, volume, quality, PiP, fullscreen, tooltips, and a clean
headless path all live behind one provider-agnostic API.
Built by [Vibe Code](https://x.com/vcode_sh). Say hi at
[hello@vcode.sh](mailto:hello@vcode.sh).
## Install
```bash
npm install vibe-player
pnpm add vibe-player
bun add vibe-player
```
```tsx
import "vibe-player/styles.css";
import { VibePlayerStage } from "vibe-player";
export function Film() {
return (
);
}
```
## What You Get
- direct MP4/WebM playback through native video
- adaptive HLS through managed `hls.js`, with native fallback
- official YouTube iframe playback
- compliant YouTube external handoff when iframe chrome is the wrong answer
- package-owned controls, timeline, captions, volume, quality, PiP, fullscreen
- keyboard shortcuts and real tooltips instead of browser-default mystery meat
- exported controller, volume, and quality helpers for custom/headless UI
- ambient preview primitives and a neutral cinematic skin
- media delivery audit CLI for catching bad MP4/CDN/CORS decisions early
## Docs
- [Usage Guide](./docs/usage.md): setup, sources, autoplay, audio, captions,
headless controls, demo, and media audit.
- [Integration Guide](./docs/integration.md): app contract, media rules,
CORS, hooks, and replacement checklist.
- [Media Delivery Audit](./docs/media-delivery.md): CLI output, CI mode,
rollout decisions, CORS credentials, and size policy.
- [Contributing](./CONTRIBUTING.md): repo rules, PR shape, tests, and API
changes.
## Local Demo
```bash
bun run demo:vite
bun run demo:vite:packaged
```
The demo exercises file, HLS, YouTube iframe, and YouTube external handoff
modes through the real package player. No pretend product shell required.
## Media Audit
```bash
npx --package vibe-player vibe-player-media-audit https://cdn.example.com/video.mp4 --origin https://app.example.com
```
Use this before blaming the player for a slow, frozen, non-faststart, CORS-bent
MP4. The CLI checks range delivery, MP4 `moov`/`mdat` ordering, CORS, size, and
direct-file rollout readiness.
## Sponsor
If Vibe Player saves you from writing this stack again, consider sponsoring
Vibe Code: [github.com/sponsors/vcode-sh](https://github.com/sponsors/vcode-sh)
## License
Apache-2.0