Video Player

Component 13

About

A compact video player with keyboard shortcuts, chapter markers, seek previews, and volume control.

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 { useEffect, useState } from 'react'
import VideoPlayer from '@/components/ui/video-player'

const duration = 74

const chapters = [
  { start: 0, title: 'Arrival' },
  { start: 14, title: 'Into the forest' },
  { start: 38, title: 'The ridge' },
  { start: 58, title: 'Last light' },
]

export default function Demo() {
  const [playing, setPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(18)

  useEffect(() => {
    if (!playing) return
    const timer = setInterval(
      () => setCurrentTime((time) => (time + 0.25 >= duration ? 0 : time + 0.25)),
      250,
    )
    return () => clearInterval(timer)
  }, [playing])

  return (
    <div className="w-full max-w-2xl space-y-3">
      <VideoPlayer
        chapters={chapters}
        className="w-full"
        poster={
          <img
            alt="Sunlight falling over a forested mountain valley"
            className="object-cover"
            src="https://cdn.21st.dev/assets/mirror/2e/2e7cda657ff2b8ba914c82681e19669e53a2cef17670429f051fa17f94b85152.jpg"
          />
        }
        currentTime={currentTime}
        duration={duration}
        onPlayingChange={setPlaying}
        onSeek={setCurrentTime}
        playing={playing}
        subtitle="A moment outdoors"
        title="Into the wild"
      />
      <p className="text-center text-xs leading-5 font-[450] text-muted-foreground">
        Space to play · ← → to seek 10s · M to mute · F for fullscreen
      </p>
    </div>
  )
}