# Video player

Video player: a free component, built on your design tokens, to use on a watch page or in a lesson, for playing one video. A video frame over the film's still, with a big play button, a seek bar that shows what has loaded, skip back and forward, elapsed and total time, captions, mute and volume, and full screen; while it plays, the controls fade away until the pointer comes back.

Prompt: Add the OpenDesigner component video-player to this project: https://opendesigner.dev/library/r/video-player.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: paused, playing, seeking, buffered, captions on, muted, hover, focus.

Accessibility: Seek and volume are native range inputs, and seek reads its time in words; play, captions and mute say their state, and the controls never hide while focus is inside them, on touch screens or with reduced motion.

File: https://opendesigner.dev/library/r/video-player.html