Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
Доктор Софтер
Altube.ru - образовательный видеохостинг
Доктор Софтер
WDA
2024
#Сайт под ключ#Разработка программного обеспечения

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

2517 
Доктор Софтер
Доктор Софтер Россия, Москва
Поделиться:
Altube.ru - образовательный видеохостинг
Клиент

ООО "Альтьюб"

Бюджет

15 000 000

Сфера

Обучение

Регион

Россия, Москва

Тип сайта

Порталы и сервисы

Сдано

Февраль 2024

Задача

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

Решение

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

1. REST API - основной функционал и логика. С ним может взаимодействовать как web-приложение, так в будущем другие клиенты: мобильные и desktop приложения.

2. Web-приложение для работы в браузере с поддержкой SSR.

3. S3 хранилище с поддержкой CDN для быстрой отдачи контента.

4. Обработчик видео, который конвертирует загружаемые видеофайлы в потоковый формат HLS. Можно запускать несколько через балансировщик.

5. Модуль для импорта видео, плейлистов и каналов из YouTube. Можно запускать несколько через балансировщик.

1Запустить MVP

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

В первую очередь, на регистрации и авторизации пользователей. При регистрации необходимо указать только имя пользователя и контактный телефон или email. После регистрации система автоматически отправляет SMS или письмо с простым временным паролем из 6 цифр для подтверждения контактной информации. Такой подход позволяет быстро проверить принадлежность указанного номера телефона или email реальному человеку. После успешной авторизации пользователь может изменить пароль и добавить название и URL своего канала. Также есть возможность зарегистрироваться и авторизоваться, используя учетную запись VK, Яндекс, Mail.Ru и Google.

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

В качестве обложки можно выбрать любой кадр из видео, а также из 3х автоматически предложенных вариантов. Также можно загрузить свою обложку, обрезав её по нужным размерам.

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

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

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

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

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

В форме добавления и редактирования видео реализованы вкладки. В целом, сделан редизайн формы для улучшения UI. Добавлена возможность указывать авторов в видео с различными ролями. Например, лектор, режиссер и т.д. В поле описания видео внедрен визуальный редактор и добавлен счетчик символов. Добавляемые видео теперь по умолчанию имеют статус черновика - для публикации есть отдельная кнопка. Также есть возможность вернуть статус черновика. Загружать теперь можно сразу несколько видео. Также добавлена возможность импорта информации о своих видео из файла Excel.

Появилась возможность сделать доступ у видео "Только для меня". Также можно настроить доступ только для выбранных пользователей, выполнив поиск или пригласив их по email или телефону. Можно настроить корпоративный доступ к видео по маске email. Если попытаться открыть страницу видео, к которому нет доступа, есть возможность запросить доступ у владельца. Всё как в Google Docs, и даже лучше :)

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

Добавилась возможность просматривать историю ранее просмотренных видео и плейлистов. Также есть возможность отложить видео в специальный список "Смотреть позже".

Для улучшения визуального оформления платформы внедрены новые иконки. Выполнен редизайн редактирования профиля - тоже в виде вкладок. Добавлена возможность для пользователя удалить свой канал и учетную запись. Доработаны изменения email/телефона в профиле. Теперь необходимо подтверждать не только новое значение, но и старое.

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

Реализован вывод SEO-метатегов для хорошей индексации контента в поисковых системах. Добавлена форма обратной связи. Добавлена возможность настройки ограничения встраивания видео - теперь можно разрешить только на определенных сайтах.

Внедрен рейтинг "ТОП 100" для видео и плейлистов по количеству просмотров. В списках теперь выводится позиция в ТОП, если видео или плейлист туда входит. Реализован импорт видео, плейлиста или канала из YouTube по ссылке. И да - появилась та самая, тёмная тема :)

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

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

По окончании просмотра видео теперь происходит автоматическое переключение на следующее с таймером. Для видео и плейлистов добавилось контекстное меню. Пользователи теперь могут оставлять комментарии к видео и плейлистам, а автор видео их модерировать.

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

Уведомления отправляются на электронную почту, а также выводятся на сайте с помощью технологии WebSocket. В профиле можно отказаться от получения каждого типа уведомлений.

Для авторов реализован специальный раздел - студия. В нём можно просматривать статистику своего канала, а также удобно работать со своими видео, плейлистами и комментариями к ним. Например, настраивать сложные фильтры и выполнять различные групповые операции. Также теперь можно разрешать пользователям скачивать исходник видео и настраивать доступ к этой функции.

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

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

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

Также была добавлена возможность указывать авторов и загружать трейлеры для плейлистов и каналов. По технической части была реализована обновляемая XML-карта сайта для поисковых систем и OpenGraph разметка для социальных сетей.

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

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

Страница канала - добавлены Emoji, которые устанавливает владелец канала. Реализован поиск внутри канала. Добавлена возможность создавать собственные разделы в рамках канала, добавляя в них видео и плейлисты.

История просмотров - реализована группировка по датам, фильтрация, сортировка и поиск. А также возможность очистки.

При просмотре видео при наведении мыши на полосу прогресса теперь показывается скриншот из видео на этой отметке. Также появилась возможность быстро перемотать видео на 10 секунд вперёд или назад. А при наведении курсора на карточку видео в списке она увеличивается, чтобы можно было увидеть более подробную информацию о видео и начать предпросмотр.

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

Добавлена возможность делать видео рекламным, с указанием маркировки. Реализована возможность загрузки и просмотра субтитров к видео.

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

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

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

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

Автор может формировать наборы вопросов по тематикам и создавать тесты, используя случайную выборку вопросов из нескольких наборов. Для теста можно указывать количество вопросов и тип проверки (зачет или экзамен).

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

6Нейросети

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

Результат

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

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

И немного о цифрах. Сейчас в сервисе более 67 тысяч видео, 2 тысяч плейлистов и 2400 пользователей. Ежемесячная аудитория - более 17 тысяч пользователей. И это только начало!

Комментарий агентства

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

Технический директор

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

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

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

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

https://altube.ru

Стек технологий

  • Go (Golang) Go (Golang) Язык программирования
  • JavaScript JavaScript Язык программирования
  • PHP PHP Язык программирования
  • Nuxt.js Nuxt.js Фреймворк/библиотека
  • Laravel Laravel Фреймворк/библиотека
  • Vue.js Vue.js Фреймворк/библиотека
  • Elasticsearch Elasticsearch База данных
  • MySql MySql База данных
  • Redis Redis База данных
  • Docker Docker Среда разработки
  • Figma Figma Графический редактор

Над проектом работали:


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

Хотите заказать похожий проект?

Доктор Софтер с удовольствием обсудит вашу задачу

Оставить заявку