Build an Accessible Chapter-Based Video.js Player with Wait ModeBuild an Accessible Chapter-Based Video.js Player with Wait Mode
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Stepwise: the player who waits for you. (2nd Submission)
Most video is watched. Some of it is followed, with your hands busy: a recipe, a repair, a knot. Every player makes that person stop and drag a thin bar back a few seconds. Stepwise moves the pause to where it is wanted.
A video’s chapters are its steps. Each one is a numbered segment of the seek bar, and when a step ends the video holds its last frame, the finished result, until you say go. Go can be a tap anywhere on the picture, the space bar, the word “next” on a computer, or two knocks on the counter on a phone. Knocks are measured on the device, and the microphone is open only while the player waits. Counter mode fills a phone’s screen, makes the step readable from across the kitchen, and keeps the screen awake. Flip Wait off, and it is an ordinary player; a video without chapters never sees any of this.
Built on Video.js v10 (HTML and CSS, on the Scaffold base). Every control is reachable from the keyboard, and reduced motion, more contrast, reduced transparency and forced colours are handled. The intro video is me explaining the player from inside it, hosted on Mux.
Mohsen's avatar
Moving the pause to where it's wanted is the insight — chapters as numbered steps, and the video holding its last frame at the end of each step until you say go, is exactly how following a recipe or a repair actually works. The two knocks on the counter to continue is a...
Anirudh's avatar
Thanks, mohsen 😃
Denis's avatar
Chapters as steps for when your hands are busy with a recipe or a repair, very practical idea.
Anirudh's avatar
Spot on. A player for the busy and messy hands.
Annika's avatar
Love that this starts from a real annoyance: greasy hands, dragging a tiny bar back ten seconds. Putting the pause where the step ends instead of where your finger is feels like something every recipe site should just have. Great problem to pick.
Anirudh's avatar
You are spot-on with the problem statement. I appreciate your acknowledgement 😃
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started