Video Player

Custom controls over a video, with buffering, speed, volume, picture in picture and fullscreen. The controls hide while it plays.

Base UI React Aria Radix UI

Product tour, October update

0:00 / 0:00

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/video-player.json

Usage

import { VideoPlayer } from "@/components/ui/video-player"

<VideoPlayer
  src="/media/tour.mp4"
  poster="/media/tour.jpg"
  title="Product tour, October update"
/>

Behaviour

Click the video to play or pause, and double click for fullscreen.
The seek bar shows how much has loaded behind the played part.
While playing, the controls and cursor fade out after 2.5 seconds of no movement. Any pointer move, tap or key brings them back. They stay up while paused, while scrubbing and while the speed menu is open.
Picture in picture only shows where the browser supports it. On iPhone, fullscreen hands over to the system player.
The speed menu follows the player into fullscreen.

Keyboard

Focus the player, then Space or K to play, Left and Right to skip 5 seconds, J and L for 10, Up and Down for volume, M to mute and F for fullscreen.

Props

src, poster. The video and the image shown before it plays.
title. The accessible name, also shown at the top while the controls are up.
preload, loop. Passed to the video element.

Typography Window Mockup

On This Page

Installation Usage Behaviour Keyboard Props