# Media Video Player Controls — React Media Component

> A video player shell with a full control bar: scrubber with buffer and hover time, expanding volume, captions, speed and keyboard shortcuts over a drawn scene.

- Category: [Audio & Media](https://pixelpapa.com/components/media.md)
- Tags: media, video, player, controls, scrubber
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/media/media-video-player-controls

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/media-video-player-controls
```

The file is written to `components/pixelpapa/media-video-player-controls.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/media/media-video-player-controls.

## AI prompt

```text
Add the "Media Video Player Controls" component from PixelPapa UI to this project.

What it is: A video player shell with a full control bar: scrubber with buffer and hover time, expanding volume, captions, speed and keyboard shortcuts over a drawn scene.
Category: Audio & Media. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/media-video-player-controls
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/media-video-player-controls.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/media-video-player-controls.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/media-video-player-controls" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More audio & media

- [Media Audio Waveform](https://pixelpapa.com/components/media/media-audio-waveform.md): A voice-note waveform that fills as it plays, previews where you are about to seek on hover and lets you click, drag or arrow-key to any point.
- [Media Image Compare Slider](https://pixelpapa.com/components/media/media-image-compare-slider.md): A before/after comparison you drag anywhere on the image; the divider follows on a tight spring, works from the keyboard and nudges itself once as a hint.
- [Media Music Player Card](https://pixelpapa.com/components/media/media-music-player-card.md) (Pro): A music player whose record slides out of its sleeve and spins while playing, with a seekable scrubber and track changes that slide in.
- [Media Podcast Episode Row](https://pixelpapa.com/components/media/media-podcast-episode-row.md): An episode list where the playing row gets a sliding highlight, a live equaliser on its cover and a progress ring around the play button.