Video Player

A composable, shadcn/ui styled video player component that uses the media-chrome library.

Installation

npx love-ui@latest add video-player

Usage

import { VideoPlayer, VideoPlayerContent, VideoPlayerControlBar, VideoPlayerTimeRange, VideoPlayerTimeDisplay, VideoPlayerVolumeRange, VideoPlayerPlayButton, VideoPlayerSeekBackwardButton, VideoPlayerSeekForwardButton, VideoPlayerMuteButton } from "@/components/video-player"

<VideoPlayer>
  <VideoPlayerContent src="/video.mp4" />
  <VideoPlayerControlBar>
    <VideoPlayerPlayButton />
    <VideoPlayerSeekBackwardButton />
    <VideoPlayerSeekForwardButton />
    <VideoPlayerTimeDisplay />
    <VideoPlayerTimeRange />
    <VideoPlayerMuteButton />
    <VideoPlayerVolumeRange />
  </VideoPlayerControlBar>
</VideoPlayer>

Features

Customizable media player controls
Responsive design that works across devices
Keyboard accessibility for media controls
Support for various media formats
Themeable with CSS variables
Lightweight and performant
Modular architecture allowing use of only needed components
Time display with customizable format
Volume controls with mute functionality
Playback controls (play/pause, seek forward/backward)
Progress bar with interactive seeking
Cross-browser compatibility

Examples

Player

"use client";

import {
  VideoPlayer,
  VideoPlayerContent,
  VideoPlayerControlBar,
  VideoPlayerMuteButton,
  VideoPlayerPlayButton,
  VideoPlayerSeekBackwardButton,
  VideoPlayerSeekForwardButton,
  VideoPlayerTimeDisplay,
  VideoPlayerTimeRange,
  VideoPlayerVolumeRange,
} from "../../../../../packages/video-player";

const Example = () => (
  <VideoPlayer className="overflow-hidden rounded-lg border">
    <VideoPlayerContent
      crossOrigin=""
      muted
      preload="auto"
      slot="media"
      src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
    />
    <VideoPlayerControlBar>
      <VideoPlayerPlayButton />
      <VideoPlayerSeekBackwardButton />
      <VideoPlayerSeekForwardButton />
      <VideoPlayerTimeRange />
      <VideoPlayerTimeDisplay showDuration />
      <VideoPlayerMuteButton />
      <VideoPlayerVolumeRange />
    </VideoPlayerControlBar>
  </VideoPlayer>
);

export default Example;

Reel Announcement