Video Player

Renders a video player with styled controls using media-chrome. It includes play, mute, seek, and time display components. Use it to embed videos with a customizable interface. The player adapts to different video sources and styles.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/video-player

npx layro-cli add @shadcnblocks/video-player

npx layro-cli add @shadcnblocks/video-player

bunx layro-cli add @shadcnblocks/video-player

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import {
  MediaControlBar,
  MediaController,
  MediaMuteButton,
  MediaPlayButton,
  MediaSeekBackwardButton,
  MediaSeekForwardButton,
  MediaTimeDisplay,
  MediaTimeRange,
  MediaVolumeRange,
} from "media-chrome/react";
import type { ComponentProps, CSSProperties } from "react";