Портфолио, проекты и кейсы Creative

Видеоплеер для обучающей платформы

Backend Frontend PHP ReactJS Symfony TypeScript JavaScript EdTech



Разработка видеоплеера для обучающей платформы с защитой от скачивания видеоматериалов.


Срок реализации – 3 дня.


Задачи


  1. Поиск надёжного видеохостинга;
  2. Личный кабинет управления видеоконтентом;
  3. Защита видео от скачивания;
  4. Размещение меток на временной шкале;
  5. Использование субтитров;
  6. Выбор качества и скорости воспроизведения;
  7. Просмотр в полноэкранном режиме.


Стэк


React, TypeScrip, Symfony 4


Решение

Сравнение видеохостингов


Самым важным было определиться с надёжным сервисом, на котором видеоматериал хранился бы в закрытом доступе. После сбора информации и сравнения возможностей выбор пал на Vimeo — он отвечал всем необходимым требованиям.


Личный кабинет управления


Перед нами не стояло задачи создать единую систему с загрузкой видеоматериалов и управлением ими на платформе. Поэтому за загрузку и размещение субтитров полностью отвечал личный кабинет на Vimeo, а за внутреннее управление и размещение видео на платформе — ЛК самой платформы. Мы лишь синхронизировали материалы видеохостинга с личным кабинетом, разработав API платформы и используя идентификатор видео на Vimeo.


Плеер для платформы


За основу плеера был взят плагин на JavaScript — Plyr, а за компонент для использования плагина на React — React Plyr. Возможностей плеера из коробки было недостаточно для того, чтобы сказать: "Вот плеер, и все функции в нём работают идеально!". Поэтому пришлось вести доработку имеющегося функционала и реализацию нового.


Защита от скачивания


Данную функцию без труда удалось реализовать возможностями API на стороне Vimeo. Видео для платформы выдавалось под временным идентификатором и токеном, поэтому прямого доступа к оригиналу получить было нельзя.


Дополнительная фича: метки на таймлайн


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


Отсутствующие функции плеера


Функции полноэкранного режима и регулировки качества видео не были заложены в компонент на Plyr для React. Эти опции управления мы реализовали на TypeScript.



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

Александр, frontend-разработчик компании Creative