# VPlayer (vplayer-react)

> VPlayer is a dependency-free React video player component. One API for MP4, HLS, YouTube, Vimeo and Bilibili, with captions, chapters, playlists, three control skins and analytics callbacks. 14 kB gzipped, React 18+, TypeScript types included.

Install with `npm i vplayer-react`. Import `{ VPlayer }` and pass any video URL to
`src` — a media file, an HLS manifest, or a YouTube, Vimeo or Bilibili link.
Nothing else is required: no stylesheet, no configuration, no other package.

```tsx
import { VPlayer } from 'vplayer-react';

export default function Page() {
  return (
    <VPlayer
      src="https://example.com/video.mp4"
      poster="/poster.jpg"
      title="My Video"
      accentColor="#ff5705"
      controlsVariant="minimal"
    />
  );
}
```

## Docs

- [Full reference](https://vplayer.hovr.dev/llms-full.txt): every prop, callback, recipe and answer on one page, in markdown
- [README](https://github.com/ardaydilek/vplayer-react#readme): the complete prop tables and type shapes
- [Live demo](https://vplayer.hovr.dev#demo): the component running, with all three control skins
- [Changelog](https://github.com/ardaydilek/vplayer-react/blob/main/CHANGELOG.md): what changed in each release
- [npm](https://www.npmjs.com/package/vplayer-react) · [GitHub](https://github.com/ardaydilek/vplayer-react)

## Facts

- 14.0 kB minified and gzipped
- Zero runtime dependencies
- Five source types behind one component: media files, HLS, YouTube, Vimeo, Bilibili
- React 18 or newer, as a peer dependency
- Ships ESM and CommonJS with matching TypeScript declarations
- Carries the `"use client"` directive, so a React Server Component can import it directly
- Licence: MIT