Altube.ru - образовательный видеохостинг

Платформа для публикации и распространения образовательного контента



Задача

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

Решение

Архитектура проекта

После проектирования для решения задачи было решено реализовать следующие модули:

  • REST API - основной функционал и логика. С ним может взаимодействовать как web-приложение, так в будущем другие клиенты: мобильные и desktop приложения.
  • Web-приложение для работы в браузере с поддержкой SSR.
  • S3 хранилище с поддержкой CDN для быстрой отдачи контента.
  • Обработчик видео, который конвертирует загружаемые видеофайлы в потоковый формат HLS. Можно запускать несколько через балансировщик.
  • Модуль для импорта видео, плейлистов и каналов из YouTube. Можно запускать несколько через балансировщик.

Запустить MVP

Вместо разработки дизайна с нуля, было принято решение начать с использования готового шаблона с последующими корректировками. Через 3 месяца после начала проекта был продемонстрирован минимально жизнеспособный продукт (MVP) клиенту.

Ключевые функции MVP:

  • Регистрация и авторизация: При регистрации необходимо указать только имя пользователя и контактный телефон или email. После регистрации система автоматически отправляет SMS или письмо с простым временным паролем из 6 цифр для подтверждения контактной информации. Также есть возможность зарегистрироваться и авторизоваться, используя учетную запись VK, Яндекс, Mail.Ru и Google.
Регистрация и авторизация на Altube
  • Управление видео: Реализована функциональность добавления, редактирования и удаления видеоматериалов с автоматической конвертацией в потоковый формат HLS и отслеживанием прогресса конвертации.
  • Настройка качества: При просмотре можно выбирать качество видео, если не устраивает автоматически подобранное по скорости интернета. Есть возможность ограничить доступ к видео только по прямой ссылке.
  • Обложки: В качестве обложки можно выбрать любой кадр из видео, а также из 3х автоматически предложенных вариантов. Также можно загрузить свою обложку, обрезав её по нужным размерам.
Выбор обложки для видео
  • Главная страница: Представляет из себя слайдер из популярных видео, а ниже последние добавленные. Есть возможность просмотра списков видео по различным критериям - каналы, категории и тематики, сортируя по дате или популярности.
  • Плейлисты и каналы: Внутри каналов можно создавать плейлисты и добавлять в них видео.
  • Социальные функции: На странице видео фиксируется количество просмотров. Есть возможность поставить лайк/дизлайк или поделиться ссылкой на страницу в социальных сетях и мессенджерах. Видео можно встраивать на другие сайты.
Страница видео с комментариями

Переосмысление структуры и поиск. Подписка, теги, история просмотров

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

Новые функции:

  • Полнотекстовый поиск: Разработана система поиска среди видео, плейлистов, каналов и участников с возможностью фильтрации по предметам, классам и жанрам.
  • Теги: Добавлены теги для видео и плейлистов, что облегчает классификацию и поиск.
  • Подписки: Реализована возможность подписки на каналы пользователей.
Поиск и фильтрация видео
  • Улучшенная форма загрузки: В форме добавления и редактирования видео реализованы вкладки. Добавлена возможность указывать авторов в видео с различными ролями (лектор, режиссер и т.д.). Внедрен визуальный редактор и счетчик символов.
  • Статусы публикации: Добавляемые видео теперь по умолчанию имеют статус черновика. Загружать теперь можно сразу несколько видео. Также добавлена возможность импорта информации о своих видео из файла Excel.
  • Управление доступом: Появилась возможность сделать доступ у видео "Только для меня". Также можно настроить доступ только для выбранных пользователей или настроить корпоративный доступ к видео по маске email. Если попытаться открыть страницу видео, к которому нет доступа, есть возможность запросить доступ у владельца.
Настройка доступа к видео
  • Модерация: Для контроля за объемом данных было введено ограничение на загрузку видео для новых каналов. Внедрили систему постмодерации, позволяющую администраторам блокировать видео с указанием причины блокировки. Также реализована возможность для пользователей жаловаться на видео.
  • История просмотров: Добавилась возможность просматривать историю ранее просмотренных видео и плейлистов. Также есть возможность отложить видео в специальный список "Смотреть позже".
История просмотров
  • Улучшения UX: Для улучшения визуального оформления платформы внедрены новые иконки. Выполнен редизайн редактирования профиля в виде вкладок. Теперь автоматически определяется и выводится длительность видео и плейлистов. При открытии видео запоминается время, где пользователь закончил просмотр.
Процент просмотра видео
  • SEO и дополнительные функции: Реализован вывод SEO-метатегов для хорошей индексации контента в поисковых системах. Внедрен рейтинг "ТОП 100" для видео и плейлистов по количеству просмотров. Реализован импорт видео, плейлиста или канала из YouTube по ссылке. Появилась тёмная тема.

Первый дизайн, уведомления, комментарии и студия

На данном этапе впервые был реализован уникальный дизайн для списков видео и плейлистов, а также для страниц плейлистов и видео.

Новые возможности:

  • Автоматическое переключение: По окончании просмотра видео теперь происходит автоматическое переключение на следующее с таймером.
  • Комментарии: Пользователи теперь могут оставлять комментарии к видео и плейлистам, а автор видео их модерировать.
Комментарии к видео
  • Уведомления: Реализованы уведомления о новых видео в каналах, на которые подписан пользователь. Автор теперь узнает о новых реакциях на видеоролики, а также что его видео добавили в плейлист или поделились. Также ежедневно можно получать статистику своего канала. Уведомления отправляются на электронную почту, а также выводятся на сайте с помощью технологии WebSocket.
Уведомления
Настройки уведомлений
  • Студия для авторов: Для авторов реализован специальный раздел - студия. В нём можно просматривать статистику своего канала, а также удобно работать со своими видео, плейлистами и комментариями к ним. Например, настраивать сложные фильтры и выполнять различные групповые операции. Также теперь можно разрешать пользователям скачивать исходник видео и настраивать доступ к этой функции.
Студия - статистика
Студия - управление видео
Студия - комментарии
  • Рекомендации: На главной странице теперь выводятся рекомендуемые видео для пользователя на основе анализа его истории просмотров. При следующем заходе в сервис пользователю теперь предлагается продолжить просмотр видео, на котором он закончил.
  • Расширенные настройки каналов: Выполнен редизайн формы редактирования канала. Для каналов появилась возможность указывать рекомендуемые видео и плейлисты, контакты владельца канала для связи, трейлеры для плейлистов и каналов. Автор теперь может настраивать заголовок и подпись по умолчанию, а также указывать реквизиты для финансовой поддержки канала.
Настройки канала
  • Техническая часть: Была реализована обновляемая XML-карта сайта для поисковых систем и OpenGraph разметка для социальных сетей.

Дизайн - новая глава

Мы продолжили внедрять уникальный дизайн - теперь уже всей платформы. Параллельно добавляли новые функции.

Основные улучшения:

  • Страница канала: Добавлены Emoji, которые устанавливает владелец канала. Реализован поиск внутри канала. Добавлена возможность создавать собственные разделы в рамках канала, добавляя в них видео и плейлисты.
Страница канала с разделами
  • История просмотров: Реализована группировка по датам, фильтрация, сортировка и поиск. А также возможность очистки.
История просмотров с фильтрами
  • Улучшения плеера: При просмотре видео при наведении мыши на полосу прогресса теперь показывается скриншот из видео на этой отметке. Также появилась возможность быстро перемотать видео на 10 секунд вперёд или назад. А при наведении курсора на карточку видео в списке она увеличивается, чтобы можно было увидеть более подробную информацию о видео и начать предпросмотр.
Навигация по видео
Главная страница
  • Мягкое удаление: Теперь автор может в любое время восстановить видео, которое решил удалить.
  • Дополнительные возможности: При встраивании видео на другом сайте в плеере теперь выводится логотип платформы. При регистрации внедрена Yandex SmartCaptcha для защиты от ботов. Добавлена возможность делать видео рекламным, с указанием маркировки. Реализована возможность загрузки и просмотра субтитров к видео.
  • Оптимизация: Доработан алгоритм работы балансировщика для скачивания и конвертации видео. Если много пользователей одновременно загрузят видео, то система будет обрабатывать их равномерно.

Тестирование пользователей и образовательные функции

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

Образовательные возможности:

Типы вопросов в тесте
Прохождение теста
Результаты теста
  • Система тестирования: Автор видео может создавать тесты для проверки и закрепления у пользователя знаний, полученных после просмотра видео или плейлиста. В них он может использовать вопросы трех типов: несколько правильных ответов, только один правильный ответ и свободный ввод ответа.
  • Наборы вопросов: Автор может формировать наборы вопросов по тематикам и создавать тесты, используя случайную выборку вопросов из нескольких наборов. Для теста можно указывать количество вопросов и тип проверки (зачет или экзамен).
Создание теста
Наборы вопросов
  • Учебные планы: В плейлист теперь можно добавлять разделы, которые являются разделителями групп видео в рамках плейлиста. А также есть возможность сформировать из плейлиста целый учебный план, группируя видео не только по разделам, но ещё и по урокам.
Учебный план

Нейросети

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

Результат

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

Сегодня на платформе есть каналы Академии Яндекса, учебного центра 1С, UsabilityLab, Алексея Савватеева (МатКульт Привет), детского проекта "Понимашка", Национального Открытого Университета "ИНТУИТ", интернет-издания DGL.ru, образовательного проекта edverest.ru, госкорпорации "Росатом" и др.

Каналы партнеров на платформе

Цифры проекта:

  • Более 67 тысяч видео
  • Более 2 тысяч плейлистов
  • 2400 пользователей
  • Ежемесячная аудитория - более 17 тысяч пользователей

Комментарий руководителя проекта

Сергей Дубинин

Мы гордимся тем, что у нас получилось реализовать данный проект. Хочется выразить огромную благодарность его создателю Анатолию Васильевичу Шкреду за крутые идеи и терпение к ошибкам. Нам очень интересно совместно работать, и мы не будем останавливаться на достигнутом.

— Сергей Дубинин, Технический директор

Отзыв клиента

Анатолий Васильевич Шкред

В сотрудничестве с DrSofter работа над проектом приносит мне большое удовольствие. Ребята берутся за любую задачу и отвечают за результат.

— Шкред Анатолий Васильевич
Клиент
ООО "Альтьюб"
Сфера
Образование, наука, работа
Задействовано
15 специалистов
До релиза
5 месяцев
Развиваем проект
Более 1 года
Выполнено
1500+ задач
Состав
API, Микросервисы, Web-приложение
Сдано
Февраль 2024
Стек технологий
Go (Golang)
Nuxt.js
Vue.js
Laravel
Redis
Elasticsearch
Docker
Apache Kafka
Kubernetes
Ссылка на проект

Команда

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

Руководители

Ярослав Чуриков
Генеральный директор, основатель
Сергей Дубинин
Технический директор, основатель

Контакты

Офисы
г. Москва
Электрический пер., 8, стр. 3, оф. 106
г. Щекино
ул. Победы 16, офис 3
Мы всегда на связи
Мы в социальных сетях
Заявка на проект