Закрытая видеоплатформа для онлайн-обучения: своя альтернатива YouTube и ВКонтакте за 2 дня
К нам обратились с задачей, которую на первый взгляд закрывает любой видеохостинг, а на деле не закрывает ни один. Нужно было провести базовое онлайн-обучение по перманентному макияжу: собрать уроки в курсы, раздать доступ ученикам и при этом сохранить полный контроль над материалом. Готовые платформы по очереди отвалились, и мы собрали для заказчика свою небольшую видеоплатформу за два дня. Рассказываем, почему так вышло и как это устроено внутри.
Задача: закрытые видеоуроки для учеников, без боли с доступом
Заказчик проводит обучение по перманентному макияжу: брови, губы, техники, разбор работ. Контент - это видеоуроки в очень хорошем качестве плюс фотоматериалы. Ученикам нужно дать ссылку на конкретный курс (например, "Брови за 1.5 часа"), чтобы они спокойно прошли подготовку с телефона или компьютера. Звучит просто, но каждое типовое решение упиралось в свою стену.
Почему не подошли готовые платформы
Мы честно перебрали очевидные варианты прежде, чем предлагать разработку. Ни один не дал нужной комбинации "качество + закрытость + удобный доступ".
YouTube - VPN и неудобный доступ. Из России доступ к YouTube нестабилен, части зрителей нужен VPN: у кого-то он есть, у кого-то нет и разбираться не хочется. Плюс сама механика закрытости неудобна: ссылка на скрытое (unlisted) видео так же расходится по чатам и не отзывается, а действительно закрытый доступ требует, чтобы у каждого ученика был аккаунт Google и вы вручную его добавляли. Для курса с потоками учеников это громоздко.
ВКонтакте - слабый контроль доступа. Видео отдаётся ссылкой, которая легко уходит дальше, а гибко закрыть утёкший доступ и перевыпустить его под новый поток толком нельзя. Для платного авторского обучения контроля не хватает.
Готовые LMS и облачные диски - мимо. Тяжёлые платформы для курсов избыточны и дороги под одну задачу. А у обычных облачных дисков нет нормального онлайн-плеера: встроенное превью сжимает картинку и не даёт адаптивного качества, плюс закрывать и раздавать доступ под потоки там неудобно. Подходящего "маленького и закрытого" решения на рынке мы не нашли.
Вывод напрашивался сам: вместо того чтобы подгонять задачу под чужой сервис, проще сделать небольшое веб-приложение ровно под этот сценарий. Так и поступили.
Решение: своя медиатека с папками-курсами и ссылками доступа
Получилась лёгкая закрытая видеоплатформа. Логика простая и повторяет то, как преподаватель мыслит структуру обучения:
Папки = курсы. Заказчик создаёт папку под тему ("Уроки по бровям", "Техники на губы") и загружает внутрь видеоуроки и фотоматериалы в нужном порядке.
Ссылка на курс. К любой папке генерируется ссылка доступа. Её отдают ученикам - они открывают курс и проходят уроки прямо в браузере, без регистраций и приложений.
Отзыв и перевыпуск доступа. Если доступ по ссылке нужно закрыть (поток отучился, ссылка ушла не туда), её отзывают одной кнопкой и при необходимости выпускают новую. Старая ссылка после этого мертва.
Всё закрыто авторизацией: попасть в саму медиатеку и управлять контентом может только владелец. Ученики же видят строго содержимое одной папки по выданной ссылке и ничего больше - ни соседних курсов, ни панели управления.
Главное удобство: всё обучение разложено по полочкам
В повседневной работе именно это оказалось самым ценным, даже до истории с приватностью. Учебный материал лежит структурно, а не сваливается в общую кучу:
Курсы - папками. Каждая тема в своей папке, вложенность любой глубины: раздел "Обучение ПМ", внутри - "Брови", "Губы", "Техники" и так далее.
Уроки - в нужной последовательности. Внутри папки уроки идут по порядку, как в программе обучения, а не вперемешку. Ученик проходит курс шаг за шагом и ничего не теряет.
Фото рядом с видео. В одном курсе хранятся и видеоуроки, и фотоматериалы (примеры работ, схемы, раздатка). Фото лежат в объектном хранилище S3 и загружаются так же просто, как видео, - всё обучение в одном месте.
Этого не дают ни видеохостинги (там нет нормальной структуры курсов и места под фото), ни обычные облачные диски (там нет приличного плеера, адаптивного качества и контроля доступа). А здесь структура, видео и фото живут вместе и под одной авторизацией.
Качество видео и быстрая загрузка - сердце проекта
Главное требование было техническим: исходники очень хорошего качества, и сервис не должен их портить. Плюс видео должны быстро загружаться у преподавателя и плавно открываться у учеников по всей стране. Под это мы выбрали Yandex Cloud Video. Что это дало:
Качество не режется. Сервис сам перекодирует загруженный исходник в набор качеств и раздаёт адаптивно: на быстром интернете - максимум, на слабом - пониже, без зависаний. Зритель может переключать качество вручную в плеере.
CDN по всей стране и за её пределами. Контент раздаётся с сети серверов, поэтому видео одинаково шустро открывается в разных регионах России, в странах СНГ и в целом где угодно. Для распределённой аудитории курса это критично.
Быстрая и устойчивая загрузка. Видео заливаются по протоколу с докачкой: если интернет моргнул на середине тяжёлого файла, загрузка продолжается с места обрыва, а не начинается заново.
Загрузка пачками. Видео и фото заливаются не по одному, а сразу пачкой: выделяешь несколько файлов, и они уходят в загрузку очередью с индикаторами прогресса. Целый курс из десятков уроков собирается за один заход.
Контроль доступа: не "нешеренная ссылка", а управляемый доступ
Сразу честно: наша ссылка на курс - это тоже ссылка, и переслать её технически можно. Ссылки, которую физически невозможно передать, не существует нигде. Разница не в этом, а в том, что происходит, когда ссылка ушла дальше, чем нужно.
Во-первых, доступ отзываемый. Ссылку курса отзывают одной кнопкой, и она мгновенно перестаёт работать у всех, кому была роздана; тут же выпускается новая для следующего потока. У скрытого видео на YouTube или у ссылки во ВКонтакте так не сделать: чтобы закрыть утёкшую ссылку, видео придётся удалять или прятать, ломая доступ и легитимным ученикам.
Во-вторых, сам видеофайл приватный: у него нет постоянной прямой ссылки, которую можно вытащить и раздавать в обход. Плеер открывается только по короткоживущему подписанному адресу, который сервер отдаёт уже после проверки доступа. То есть утечь может максимум отзываемая ссылка курса, но не сам файл. Это и есть реальное отличие: не магическая "непересылаемая ссылка", а полный контроль над тем, у кого доступ есть прямо сейчас.
Десктоп и мобильный - обязательно оба
Ученики проходят подготовку с телефонов не реже, чем с компьютеров, поэтому требование было сделать полноценную и десктопную, и мобильную версию. Интерфейс адаптивный целиком: сетка превью, плеер, выдача ссылок и просмотр курса одинаково удобны на любом экране.
Так выглядит курс глазами ученика, который открыл ссылку: только нужная папка, уроки по порядку, аккуратные обложки и плеер. Ничего лишнего, никаких VPN и установок.
Дизайн в стилистике сайта заказчика
У заказчика уже есть сайт в узнаваемой айдентике, и платформа не должна была из неё выпадать. Мы подняли дизайн-систему сайта (шрифт, цвета, акцент, скругления, логотип) и собрали интерфейс медиатеки в ней же. Для пользователя это выглядит как естественное продолжение бренда, а не как сторонний сервис.
Технологии под капотом
Если коротко по стеку, без маркетинга:
Фронтенд: Nuxt (Vue), полностью адаптивный SPA-интерфейс.
Бэкенд: лёгкий серверный слой на Nitro и база данных PostgreSQL - в ней хранятся структура папок, метаданные видео и фото, ссылки доступа и сессии зрителей.
Видео: Yandex Cloud Video - приватный канал, авто-перекодирование в адаптивные качества, раздача через CDN, подписанный плеер.
Фото: объектное хранилище S3 с прямой загрузкой по временным ссылкам.
Доступ: вход под единой учёткой владельца, пароль хранится в виде стойкого хеша, сессия - подписанная защищённая кука.
Сколько это стоит в месяц
Сильная сторона связки - дешёвая эксплуатация. Отдельного сервера под видео не нужно: само приложение крутится на уже имеющемся у заказчика хостинге (там же, где сайт), так что фиксированной абонентки за платформу нет. Видеохостинг оплачивается по факту использования, без подписки:
Хранение - копейки. Доли копейки за гигабайт в час; для библиотеки уроков это десятки рублей в месяц.
Перекодирование - разово при загрузке. Около 1 рубля за минуту видео, платится один раз, когда урок заливается.
Трафик - по просмотрам. Порядка 1 рубля за гигабайт отданного зрителям видео. Для закрытого курса с ограниченным числом учеников это небольшая предсказуемая сумма.
Итог: вместо абонентской платы за чужую платформу заказчик платит только за реально использованные хранение и трафик - в этом сценарии это десятки, максимум сотни рублей в месяц.
Результат и сроки
На выходе у заказчика своя закрытая видеоплатформа под онлайн-обучение перманентному макияжу:
уроки и фото разложены по папкам-курсам, доступ раздаётся ссылками и отзывается в один клик;
видео в исходном качестве, с переключением качеств и быстрой доставкой по стране через CDN;
доступ управляемый: приватные видеофайлы и отзываемые ссылки вместо неотзываемой ссылки на YouTube или во ВКонтакте;
полноценные десктоп и мобайл, всё под авторизацией, в фирменной стилистике сайта;
дешёвая эксплуатация на существующем хостинге, оплата видео по факту.
Вся разработка заняла два дня. Это тот случай, когда небольшое приложение под конкретную задачу оказывается и удобнее, и дешевле, и безопаснее, чем попытки усидеть на чужих платформах.
Частые вопросы
Чем это лучше, чем просто залить видео на YouTube или во ВКонтакте?
YouTube из России требует VPN у части аудитории, а ВКонтакте отдаёт видео ссылкой, которая бесконтрольно расходится. Своя платформа решает оба: открывается у всех без VPN и держит видео приватными с отзываемым доступом.
Не режется ли качество исходников?
Нет. Yandex Cloud Video перекодирует исходник в набор качеств и раздаёт адаптивно, сохраняя картинку. Зритель видит максимум, который тянет его интернет, и может переключить качество вручную.
Что будет, если ссылка на курс попадёт не туда?
Её отзывают одной кнопкой - доступ пропадает у всех, кому она была роздана. При необходимости тут же выпускается новая ссылка для следующего потока.
Можно ли так сделать платформу под другое обучение или контент?
Да. Схема "папки-курсы + видео и фото + ссылки доступа + приватный хостинг" универсальна для любых закрытых видеоматериалов: онлайн-школы, корпоративное обучение, клиентские базы знаний. Под более сложные сценарии собираем кастомную LMS.
Сколько стоит сделать похожее решение?
Зависит от объёма функций, но базовую закрытую видеоплатформу подобного класса реально собрать быстро и недорого. Точную вилку называем после короткого обсуждения задачи.
Нужна закрытая платформа под видео, обучение или базу знаний? Мы делаем кастомные веб-приложения и LMS под конкретную задачу - быстро, в вашей айдентике и с дешёвой эксплуатацией. Расскажите, что нужно закрыть, и предложим решение.