Video Player

Component 15

About

A full-featured HTML5 video player with a scrub bar, volume control, captions, playback-speed menu, picture-in-picture, fullscreen and keyboard shortcuts (space/k, j/l, m, f, c, arrow keys). Ported to React from the original Svelte "Video" component by ebnsina (Sina UI), keeping the same markup, class names, behaviour and copy.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Video Player to your project and fits it to your theme.

Code

How Video Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import VideoPlayer from "@/components/ui/video-player";

export default function VideoPlayerDemo() {
  return (
    <div className="w-full max-w-2xl">
      <VideoPlayer
        title="Friday"
        src="https://cdn.21st.dev/assets/localized/339504acdef44f4e50c760e657cf76a8df60f25c91a239682abda56ac1886e90.mp4"
        crossOrigin="anonymous"
      >
        <track
          kind="captions"
          srcLang="en"
          label="English"
          src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
        />
      </VideoPlayer>
    </div>
  );
}