Видеоконтент уже прочно вошел в мир Интернета и без него сложно представить глобальную сеть.
Однако технологии встраивания видео в гипертекстовые документы со временем претерпели определенную эволюцию: от RealPlayer к QuickTime и Flash, а в настоящее время — к встроенной поддержке видео в HTML5. Однако все это время различные реализации видеоплееров страдали от проблем кроссплатформенной и кроссбраузерной совместимости, а также от низкого или даже нулевого уровня доступности.
И если способы борьбы с первой группой проблем в целом понятны и существуют в виде готовых решений, то проблемы доступности для подавляющего большинства веб-разработчиков уже, как правило, сложны для понимания, и с Что касается видео, то они остались полной загадкой.
Однако, к счастью, для второй проблемы появилось готовое решение, благодаря которому каждый может предоставить своим пользователям полноценный видеоплеер даже без глубоких компетенций в области веб-доступности.
Специалисты PayPal, ранее представившие такой продукт, как Плагин Bootstrap Accessibility , решил на этот раз взять на себя проблему доступности видеоконтента и решить ее исключительно в рамках HTML5 без каких-либо дополнительных зависимостей и сторонних плагинов.
Перед проектом были поставлены следующие цели:
- Используйте новейшие технологии HTML5 для встраивания видео, элементов управления и субтитров;
- Минимизировать вес кода (5 КБ CSS и 18 КБ JS);
- Обеспечить полное управление с клавиатуры и доступность для невизуальных программ чтения с экрана;
- Обеспечить поддержку субтитров (с использованием WebVTT).
Поддержка видеоконтейнера обычно хорошо поддерживается всеми современными браузерами, за исключением Internet Explorer 8. По большому счету, даже стандартная реализация встроенного видео уже имеет базовую доступность и даже позволяет прикрепить субтитры , но нет предела совершенству, так что есть куда совершенствоваться.
Во-первых, используется обычный видеоконтейнер, который позволяет сохранить базовый функционал в ситуации мобильного браузера или отключенного JavaScript, поскольку тогда вместо кастомной реализации будет просто отображаться стандартный HTML5-плеер.
Если пользователь авторизуется из браузера современного ПК с включенным JavaScript, то плеер предлагает ему настраиваемый интерфейс с измененным управлением, дизайном и поддержкой субтитров (при их наличии), а главное, все это характеризуется максимальной доступностью для пользователей с различные инвалидности.
Управление перезапуском, запуском/паузой и перемоткой реализовано через кнопочное управление, а включение/выключение звука и субтитров - через элементы типа флажка, так как требует подчеркивания двух состояний, а регулировка громкости реализована через ввод с заданным диапазоном.
.
Вы можете наблюдать за игроком в прямом эфире Здесь .
Разработчики отмечают некоторую несогласованность в отношении поддержки WebVTT в последних версиях браузеров для ПК.
Chrome ведет себя более-менее прилично, а вот Internet Explorer 11, Safari 7 и Firefox 31 имеют проблемы с работой с субтитрами, хотя в Safari 6 и Firefox 30 таких проблем не было.
Как ни странно, мобильные браузеры ведут себя более адекватно, когда речь идет о поддержке субтитров.
, и этот функционал без проблем работает на Android и iOS. Лично я бы отметил, что одним из слабых мест является то, что разработчики до сих пор не предусмотрели горячие клавиши или хотя бы атрибуты accesskey для управления, которые бы существенно повысили доступность плеера для пользователей программ невизуального доступа к экрану.
Поскольку их взаимодействие в большинстве случаев осуществляется через аудиоканал, звук воспроизводимого видео может помешать найти нужное управление на слух, а наличие горячих клавиш помогло бы управлять плеером без необходимости предварительного сосредоточения внимания на кнопках.
и галочки, то есть практически вслепую.
Кроме того, при использовании плеера на неанглоязычных сайтах не забывайте локализовать текстовые надписи элементов управления.
Лицензия Accessible HTML5 Video Player позволяет максимально свободно использовать его, а познакомиться с ним можно почти неприлично на GitHub .
Теги: #доступность #html5 #плеер #видео #субтитры #доступность #разработка сайтов #HTML
-
Миграция С Nagios На Icinga2 В Австралии
19 Oct, 24 -
Ярмарка Финансовой Грамотности Fin-Fair.ru
19 Oct, 24
