Video Player

Composable video player component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring media-chrome integration, keyboard controls, and cross-browser compatibility.

media-chrome

Loading component...

'use client';import {  MediaControlBar,  MediaController,  MediaMuteButton,  MediaPlayButton,  MediaSeekBackwardButton,  MediaSeekForwardButton,  MediaTimeDisplay,  MediaTimeRange,  MediaVolumeRange,} from 'media-chrome/react';import type { ComponentProps, CSSProperties } from 'react';import { cn } from '@/lib/utils';export type VideoPlayerProps = ComponentProps<typeof MediaController>;const variables = {  '--media-primary-color': 'var(--primary)',  '--media-secondary-color': 'var(--background)',  '--media-text-color': 'var(--foreground)',  '--media-background-color': 'var(--background)',  '--media-control-hover-background': 'var(--accent)',  '--media-font-family': 'var(--font-sans)',  '--media-live-button-icon-color': 'var(--muted-foreground)',  '--media-live-button-indicator-color': 'var(--destructive)',  '--media-range-track-background': 'var(--border)',} as CSSProperties;export const VideoPlayer = ({ style, ...props }: VideoPlayerProps) => (  <MediaController    style={{      ...variables,      ...style,    }}    {...props}  />);export type VideoPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;export const VideoPlayerControlBar = (props: VideoPlayerControlBarProps) => (  <MediaControlBar {...props} />);export type VideoPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;export const VideoPlayerTimeRange = ({  className,  ...props}: VideoPlayerTimeRangeProps) => (  <MediaTimeRange className={cn('p-2.5', className)} {...props} />);export type VideoPlayerTimeDisplayProps = ComponentProps<  typeof MediaTimeDisplay>;export const VideoPlayerTimeDisplay = ({  className,  ...props}: VideoPlayerTimeDisplayProps) => (  <MediaTimeDisplay className={cn('p-2.5', className)} {...props} />);export type VideoPlayerVolumeRangeProps = ComponentProps<  typeof MediaVolumeRange>;export const VideoPlayerVolumeRange = ({  className,  ...props}: VideoPlayerVolumeRangeProps) => (  <MediaVolumeRange className={cn('p-2.5', className)} {...props} />);export type VideoPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;export const VideoPlayerPlayButton = ({  className,  ...props}: VideoPlayerPlayButtonProps) => (  <MediaPlayButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerSeekBackwardButtonProps = ComponentProps<  typeof MediaSeekBackwardButton>;export const VideoPlayerSeekBackwardButton = ({  className,  ...props}: VideoPlayerSeekBackwardButtonProps) => (  <MediaSeekBackwardButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerSeekForwardButtonProps = ComponentProps<  typeof MediaSeekForwardButton>;export const VideoPlayerSeekForwardButton = ({  className,  ...props}: VideoPlayerSeekForwardButtonProps) => (  <MediaSeekForwardButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;export const VideoPlayerMuteButton = ({  className,  ...props}: VideoPlayerMuteButtonProps) => (  <MediaMuteButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerContentProps = ComponentProps<'video'>;export const VideoPlayerContent = ({  className,  ...props}: VideoPlayerContentProps) => (  <video className={cn('mt-0 mb-0', className)} {...props} />);

Installation

npx shadcn@latest add https://www.shadcn.io/registry/video-player.json

npx shadcn@latest add https://www.shadcn.io/registry/video-player.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/video-player.json

bunx shadcn@latest add https://www.shadcn.io/registry/video-player.json

Examples

Basic Video Player

Loading component...

'use client';import {  MediaControlBar,  MediaController,  MediaMuteButton,  MediaPlayButton,  MediaSeekBackwardButton,  MediaSeekForwardButton,  MediaTimeDisplay,  MediaTimeRange,  MediaVolumeRange,} from 'media-chrome/react';import type { ComponentProps, CSSProperties } from 'react';import { cn } from '@/lib/utils';export type VideoPlayerProps = ComponentProps<typeof MediaController>;const variables = {  '--media-primary-color': 'var(--primary)',  '--media-secondary-color': 'var(--background)',  '--media-text-color': 'var(--foreground)',  '--media-background-color': 'var(--background)',  '--media-control-hover-background': 'var(--accent)',  '--media-font-family': 'var(--font-sans)',  '--media-live-button-icon-color': 'var(--muted-foreground)',  '--media-live-button-indicator-color': 'var(--destructive)',  '--media-range-track-background': 'var(--border)',} as CSSProperties;export const VideoPlayer = ({ style, ...props }: VideoPlayerProps) => (  <MediaController    style={{      ...variables,      ...style,    }}    {...props}  />);export type VideoPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;export const VideoPlayerControlBar = (props: VideoPlayerControlBarProps) => (  <MediaControlBar {...props} />);export type VideoPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;export const VideoPlayerTimeRange = ({  className,  ...props}: VideoPlayerTimeRangeProps) => (  <MediaTimeRange className={cn('p-2.5', className)} {...props} />);export type VideoPlayerTimeDisplayProps = ComponentProps<  typeof MediaTimeDisplay>;export const VideoPlayerTimeDisplay = ({  className,  ...props}: VideoPlayerTimeDisplayProps) => (  <MediaTimeDisplay className={cn('p-2.5', className)} {...props} />);export type VideoPlayerVolumeRangeProps = ComponentProps<  typeof MediaVolumeRange>;export const VideoPlayerVolumeRange = ({  className,  ...props}: VideoPlayerVolumeRangeProps) => (  <MediaVolumeRange className={cn('p-2.5', className)} {...props} />);export type VideoPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;export const VideoPlayerPlayButton = ({  className,  ...props}: VideoPlayerPlayButtonProps) => (  <MediaPlayButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerSeekBackwardButtonProps = ComponentProps<  typeof MediaSeekBackwardButton>;export const VideoPlayerSeekBackwardButton = ({  className,  ...props}: VideoPlayerSeekBackwardButtonProps) => (  <MediaSeekBackwardButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerSeekForwardButtonProps = ComponentProps<  typeof MediaSeekForwardButton>;export const VideoPlayerSeekForwardButton = ({  className,  ...props}: VideoPlayerSeekForwardButtonProps) => (  <MediaSeekForwardButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;export const VideoPlayerMuteButton = ({  className,  ...props}: VideoPlayerMuteButtonProps) => (  <MediaMuteButton className={cn('p-2.5', className)} {...props} />);export type VideoPlayerContentProps = ComponentProps<'video'>;export const VideoPlayerContent = ({  className,  ...props}: VideoPlayerContentProps) => (  <video className={cn('mt-0 mb-0', className)} {...props} />);

Use Cases

Educational platforms - Course videos with custom controls and branding
Marketing sites - Product demos and promotional video content
Documentation - Tutorial videos with consistent player styling
Media applications - Custom video experiences with advanced controls

Implementation

Built with media-chrome for reliable video handling. Uses CSS variables for theming. Supports keyboard controls and accessibility. Modular design with cross-browser compatibility.

Features

Media controls - Customizable player interface with media-chrome integration for React applications
Keyboard accessibility - Full keyboard navigation and screen reader support using JavaScript event handling
Multi-format support - Various video and audio formats with cross-browser compatibility for Next.js projects
Modular architecture - Use only needed components with flexible composition using TypeScript interfaces
Interactive seeking - Progress bar with click-to-seek functionality using mouse events
Volume controls - Mute and volume adjustment with responsive design using Tailwind CSS
Theme integration - CSS variable support with shadcn/ui color schemes and customization
Open source - Free video player with lightweight performance and responsive layout

Reactvideo-player