Video Player

A modern YouTube-style video player built with Next.js, TypeScript, Tailwind CSS, and React.

Features

• Upload and persist videos (IndexedDB)
• Resume playback from last position (localStorage)
• Timeline hover previews — synced frame thumbnails generated from the video
• Playback speed control (0.75x – 2x)
• Theater mode, fullscreen, and picture-in-picture mini player
• Keyboard shortcuts (Space, K, J/L, M, F, T, I)
• Hold Space for 2x speed
• Polished dark UI with smooth controls

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Optional sample video

Place a file at public/sample-video.mp4 for the default demo, or use Upload Video.

Keyboard Shortcuts

Key	Action
Space	Play / Pause
Hold Space	2x speed
K	Play / Pause
J / ←	Rewind 5s
L / →	Forward 5s
M	Mute
F	Fullscreen
T	Theater mode
I	Mini player (PiP)

Legacy Files

The original static implementation is kept as reference:

• index.html
• styles.css
• script.js

Tech Stack

• Next.js 15 (App Router)
• React 19
• TypeScript
• Tailwind CSS