Разработка видеоплеера для обучающей платформы с защитой от скачивания видеоматериалов.
Срок реализации – 3 дня.
Задачи
- Поиск надёжного видеохостинга;
- Личный кабинет управления видеоконтентом;
- Защита видео от скачивания;
- Размещение меток на временной шкале;
- Использование субтитров;
- Выбор качества и скорости воспроизведения;
- Просмотр в полноэкранном режиме.
Стэк
React, TypeScrip, Symfony 4
Решение
Сравнение видеохостингов
Самым важным было определиться с надёжным сервисом, на котором видеоматериал хранился бы в закрытом доступе. После сбора информации и сравнения возможностей выбор пал на Vimeo — он отвечал всем необходимым требованиям.
Личный кабинет управления
Перед нами не стояло задачи создать единую систему с загрузкой видеоматериалов и управлением ими на платформе. Поэтому за загрузку и размещение субтитров полностью отвечал личный кабинет на Vimeo, а за внутреннее управление и размещение видео на платформе — ЛК самой платформы. Мы лишь синхронизировали материалы видеохостинга с личным кабинетом, разработав API платформы и используя идентификатор видео на Vimeo.
Плеер для платформы
За основу плеера был взят плагин на JavaScript — Plyr, а за компонент для использования плагина на React — React Plyr. Возможностей плеера из коробки было недостаточно для того, чтобы сказать: "Вот плеер, и все функции в нём работают идеально!". Поэтому пришлось вести доработку имеющегося функционала и реализацию нового.
Защита от скачивания
Данную функцию без труда удалось реализовать возможностями API на стороне Vimeo. Видео для платформы выдавалось под временным идентификатором и токеном, поэтому прямого доступа к оригиналу получить было нельзя.
Дополнительная фича: метки на таймлайн
Для того, чтобы пользователю было удобно работать с обучающей платформой (видеоуроком), был задуман и реализован функционал размещения цветовых меток на таймлайн. С помощью них пользователь мог понять, где произойдёт смена темы — она отображалась в текстовом виде при наведении курсора на отрезки этих меток. Функционал управления метками заложили в личный кабинет платформы для администратора, который указывал промежуток времени и необходимую текстовую информацию для отображения на временной шкале.
Отсутствующие функции плеера
Функции полноэкранного режима и регулировки качества видео не были заложены в компонент на Plyr для React. Эти опции управления мы реализовали на TypeScript.
Мы разработали плеер для обучающей платформы, который обладает всеми необходимыми функциями: полноэкранный режим, выбор качества и скорости воспроизведения, и многое другое. Также мы создали дополнительный функционал с метками на таймлайн и защитили видео от скачивания.
Александр
Senior, teamlead frontend