Я открыл для себя Udemy как сервис около 5–6 лет назад. Ниже вы можете прочитать, что мне показалось интересным, понаблюдав за плеером в течение нескольких часов.
ВебВТТ
Формат текстовых дорожек веб-видео, или WebVTT, представляет собой спецификацию для разметки внешних ресурсов текстовых дорожек и размещения их в <track> элементах.
Существует реализация для Node.js и браузеров, которая называется vtt.js (версии от VideoJS и Mozilla).
Оказывается, Udemy использует VideoJS версия 0.12.4 (28 апреля 2017 г.) в качестве запасного значения. Версия для меня была 0.12.6 (13 фев 2018).
VTT-файлы выглядят так:
Udemy также использует WebVTT для отображения всплывающих окон с помощью спрайтов миниатюр:
Статистика
Разработка видеоплеера не очевидна: он включает в себя функции, специфичные для браузера (например, Полноэкранный API, Promise, Модули JavaScript через тег скрипта и т. д.), зависит от других используемых библиотек (например, hls.js , shaka-player, videojs и так далее). Вот почему это общий подход к отправке событий игрока и последующему анализу данных.
Udemy использует XMLHttpRequest в _sendBeaconQueue для синхронных запросов и sendBeacon в _clearBeaconQueue для асинхронных запросов. Данные отправляются в виде последовательности событий.
Полный пример XMLHttpRequest доступен здесь. Вы можете видеть временную метку UTC как uti, название события как e, идентификатор видео как vid и т. д. События отправляются на https://<ake>.litix.io, где <ake> – идентификатор пользователя. beaconUrl — это https://vfq2nsli1v76fglgdl9puq0cd.litix.io.
Полный пример sendBeacon доступен здесь. Вы можете увидеть больше данных о браузере, ОС, библиотеках, контенте, курсе и так далее и тому подобное. beaconUrl здесь тоже https://vfq2nsli1v76fglgdl9puq0cd.litix.io.
DRM
Все видео моих старых курсов (и даже то, что я купил сейчас) в формате MP4. Я не нашел ничего, что включало бы DRM. Однако url к потоку включает 2 GET-параметра для доступа к нему: nva и token, иначе доступ запрещен.
Элемент тега видео содержит источник потока и воспроизводит его без проблем. Если вы попытаетесь поставить src без этих параметров, вы получите ошибку:
Алексей Березин,
Front-end Developer от Яндекс
