Cinema
Full-screen cinematic player with auto-hiding controls, episode panel, and scrubber thumbnail preview.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| video | string | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 | Video source URL. |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
When to Use
Best for streaming platforms, video-on-demand apps, and immersive editorial experiences where the content takes full precedence. The episode slide-in panel makes it ideal for series or multi-part content.
Best Practices
Keep the episode list short (4–6 items) for first-load performance. The controls auto-hide after 3 seconds — ensure your video is high enough resolution to fill the screen without distortion.
Why This Component Matters
Full-screen immersive players increase watch completion rates by removing visual distractions. The scrubber thumbnail preview is one of the most-requested features in modern players — it helps users navigate quickly without committing to a new position.
FAQ
QHow does the thumbnail preview work?
A hidden video element seeks to the hovered timestamp in real time. On each 'seeked' event, the frame is drawn to a 160×90 canvas and displayed above the scrubber cursor.
QCan I add more episodes?
Yes. The episode list is a static array inside the component. Replace it with a prop or API call to populate dynamically.
QDoes it support keyboard navigation?
Space toggles play/pause. Arrow keys seek forward/back. Escape closes the episode panel. All are implemented natively.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.