Тестовое задание 20 Dec 2023
saiph - доступный веб-плеер видео
- Vanilla JS
- HTML5 Video
- CSS
- Accessible
- Cloudflare
Видеоплеер на HTML5 и чистом JavaScript с управлением с клавиатуры: дорожка перемотки с засечками, моноширинный таймкод, перемотка по двойному клику, субтитры и картинка-в-картинке, плейлист из восьми цветовых грейдов. Без фреймворков и зависимостей.
Задача
Превратить мёртвый макет видеоплеера, где громкость, mute, перемотка и плейлист ничего не делали, в плеер, где работает каждый контрол, всё доступно и адаптивно и читается как продуманный инструмент, а не шаблон.
Подход
Управлять интерфейсом целиком из нативных событий медиа, чтобы состояние не рассинхронизировалось, использовать нативные range для ползунков ради клавиатуры и доступности из коробки, корректно обработать промис play() и перемотку через HTTP range. Полностью заменить дизайн системой OKLCH в духе тёплой графитовой монтажной консоли с моноширинным таймкодом, затем проверить клавиатуру, семантику для скринридеров и вёрстку на 390 и 1440 в браузере.
Результат
Доступный HTML5-плеер с управлением с клавиатуры, дорожкой с засечками, перемоткой по двойному клику, плейлистом из восьми грейдов, картинкой-в-картинке и субтитрами. Чистый JavaScript, без зависимостей, чистая консоль, статикой на Cloudflare Pages.