A video-first player built with Video.js v10, pairing a focused Watch mode with chapter navigation, playback speeds and precise A–B practice loops.
Actual SIGHTLINE interface: video-first playback with Watch and Practice modes.
The idea
Video should remain the center of the experience. SIGHTLINE places playback controls below the picture and gives watching and deliberate practice their own clear modes.
The experience
Watch mode keeps essential controls close. Practice mode adds named chapters, direct playback speeds and A–B looping for repeating a specific passage. The interface shows the selected range, its duration and repeat feedback, with an explicit Stop control. Switching modes preserves the same media instance and playback state.
Design and implementation
I developed the responsive interface and reusable player skin using React, TypeScript and Video.js v10. A separate guide rail makes chapters and the active practice range visible without covering the video. The demo shows the same player approach across a rhythm lesson and a handwriting example.
Project context
SIGHTLINE was entered in the Video.js Skins Design Challenge. The linked demo and repository show the working product; no award or measured learning improvement is claimed.
Explore the project
Practice controls: chapter navigation, A–B range and repeat feedback.
Actual SIGHTLINE interface shown in desktop and mobile layouts.
0 likes · 0 views · Nov 14, 2026
A video-first player built with Video.js v10, pairing a focused Watch mode with chapter navigation, playback speeds and precise A–B practice loops.
