Собственный браузер Plllay для удобного просмотра видео: разбор концепта и вертикального управления

Проблема мобильного видеоплеера: почему стандартный UX мешает учиться

Когда вы регулярно смотрите сложный образовательный или практический контент — будь то академические лекции по квантовой механике, подробные разборы техники игры на гитаре, обучающие уроки по видеомонтажу или комплексы физических упражнений — ключевое значение приобретает точность навигации по видеопотоку. Важна возможность мгновенно отмотать ролик на пару секунд назад, пересмотреть нужный кадр или детально разобрать конкретное движение.

Однако на практике зритель постоянно сталкивается с техническими ограничениями интерфейсов. Дополнительная сложность возникает тогда, когда одна рука занята: вы держите стилус и конспектируете материал, держите инструмент, находитесь на тренировке или работаете с мышью перед монитором. Навигация по видео с помощью одной руки в классических мобильных плеерах превращается в регулярную борьбу с интерфейсом.

Анатомия компромиссов: прогресс-бар, дабл-тапы и удерживание

Современная индустрия мобильных приложений предлагает пользователям три основных элемента управления плеером, встроенных непосредственно в интерфейс просмотра. К сожалению, каждый из них обладает принципиальными недостатками при работе одной рукой:

• Горизонтальный прогресс-бар в альбомной ориентации (Landscape): анатомически неудобен. Дотянуться большим пальцем руки к началу полосы прокрутки или к первой половине таймлайна без перехвата устройства физически невозможно.
• Прогресс-бар в портретном режиме (Portrait): сжимается до минимальной ширины. В результате попытка попасть в конкретную секунду превращается в случайный клик, особенно если вы находитесь в движении или выполняете упражнения. Это одна из ключевых причин, почему серьезный обучающий контент теряет аудиторию на мобильных устройствах.
• Двойные тапы (Double-tap): имеют дискретный шаг (например, 10 секунд). Они не позволяют сразу попасть в промежуточный короткий отрезок времени, а длительная перемотка требует бесконечного нажимания по экрану.
• Удерживание пальца (Long-tap для x2): позволяет временно ускорить воспроизведение, но абсолютно не решает задачу точной точечной навигации по ключевым фрагментам.

Концепция вертикального скраббинга: контроль видеопотока одной рукой

Чтобы решить эти интерфейсные ограничения, я спроектировал и реализовал систему вертикального управления видеопотоком. Её главная идея — отказаться от жесткой привязки к узким горизонтальным ползункам и предоставить пользователю независимый элемент точного скраббинга (полосы прокрутки), с которым легко взаимодействовать большим пальцем одной руки.

Пока крупные медиаплатформы и стриминговые сервисы согласовывают дорожные карты, метрики KPI и выискивают ресурсы на доработку пользовательского интерфейса, я создал готовое практическое решение, заточенное под комфортный просмотр обучающих видеоматериалов.

Как устроен проект Plllay: архитектура из трех компонентов

В основе моей разработки лежит экосистема из трех взаимосвязанных инициатив:

1. Референсный веб-плеер: кастомный веб-интерфейс с расширенной функциональностью, собранный на базе открытого плеера Plyr.
2. Проект инъекции (Injection Code): специальный набор JS- и CSS-скриптов, которые динамически встраивают модуль вертикального скраббинга поверх стандартного видеоплеера на веб-странице (сейчас реализована поддержка Plyr, в процессе интеграция с FlowerPlayer/Flowplayer).
3. Мобильное приложение-браузер: специализированный браузер для Android, внутри которого работает ветка инжект-проекта.

Мобильный браузер на базе Mozilla Gecko и механизм инъекций

В качестве технического фундамента для мобильного браузера я выбрал движок Mozilla Gecko. Внутри приложения работает расширение, которое автоматически внедряет JS и CSS-файлы на поддерживаемых сайтах, добавляя удобный вертикальный скраббар поверх встроенного видеоплеера.

Все файлы инъекций кэшируются внутри устройства. Браузер имеет минималистичный функционал для работы с вкладками — ровно то, что необходимо для быстрой и комфортной работы с видео без лишней нагрузки на систему.

Подгрузка кода инъекций извне позволяет обновлять логику взаимодействия и добавлять поддержку новых сторонних видеоплееров без необходимости пересобирать и переустанавливать само приложение браузера. На стартовом экране пользователя встречают анонсы новых поддерживаемых сервисов и полезные ссылки на образовательные ресурсы.

Перспективы развития, поддержка плееров и открытый код

На текущем этапе релиз сосредоточен именно на добавлении удобного вертикального скраббара без тотальной переработки всего визуального стиля плееров, хотя полная кастомизация интерфейса стоит в ближайших планах разработки. В будущем я также планирую добавить отдельные виджеты для пропуска рекламных интеграций, когда будет покрыт основной массив популярных видеоплееров.

Проект развивается как открытое решение: исходный код доступен на GitHub, а тестовые сборки APK открыты для загрузки и тестирования всеми желающими.

Источник: habr.com