A compact video player with keyboard shortcuts, chapter markers, seek previews, and volume control.
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>
)
}
Part of Pasta UI — browse the full library on 21st.dev.