The Hole

Платформа видеостриминга для Medium Quality — крупнейшего паблишера российского YouTube

Клиент

Medium Quality

Крупнейший паблишер российского YouTube. Выпускает Внутри Лапенко, Что было дальше, Big Russian Boss Show, Я себя знаю, Контакты, Outside Stand Up и другие шоу.

Задача

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

Контент уже давно вовсю создают и потребляют на мобильных устройствах. В этом кейсе расскажем, как мы создали приложение, ставшее практически «собственным YouTube» для продакшена Medium Quality. Сейчас The Hole — это приложение, ставшее №1 в категории «Развлечения» в App Store, а в Google Play у него более 100 000 установок.

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

Кроме того, MQ нужно было выйти за рамки возможностей YouTube, чтобы делать максимально разнообразный контент: не только публиковать видеоролики, но и дать возможность комьюнити обмениваться самыми яркими моментами разных шоу. Впрочем, обо всём по порядку.

Решение

Подготовились

Провели CJM-воркшоп и вместе с командой MQ построили карту путей пользователя: для каждой точки касания описали действия и психоэмоциональное состояние клиента, aha-моменты, барьеры и способы их снижения с помощью будущего продукта.

Разработали UX/UI

На начальном этапе у проекта не было названия и брендинга, поэтому сначала мы сделали обезличенный концепт дизайна. Название The Hole и основная цветовая палитра появились позже. Нейминг мы обыграли в UI-дизайне с помощью графики и анимаций. 

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

Первоначальный вид приложения The Hole

То, как приложение выглядит сейчас — результат редизайна, проведенного по концепту MQ. Изменились элементы фирменного стиля за счёт шрифтов, иконки стали округлыми — такая стилистика знакома всем нам по соцсетям.

Приложение The Hole после редизайна

Дизайн мини-плеера тоже обновился: 

  • кнопки и значки настроек стали более контрастными;
  • в управлении звуком добавили возможность смотреть видео на стандартном шаге воспроизведения: 0,5 — 1 — 1,25 — 1,5 — 2;
  • добавили кнопку перемотки, раньше перематывать можно было только жестом, сейчас — по одному длинному нажатию или двум коротким;
  • добавили воспроизведение видео в качестве Full HD.
Редизайн мини-плеера

Выбрали Flutter

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

Единственное, в чём у нас были сомнения, — как Flutter справится с видеоплеером. Поэтому за два дня мы собрали демо для iOS и Android: проверили скорость воспроизведения и перемотки HLS-видео, возможность построить кастомный UI поверх плагинных возможностей управления плеером. 

Параллельно мы не забывали сами прокачиваться в кроссплатформенной технологии и делали контрибьюты в один из самых популярных пакетов для работы с видео на Flutter — video_player. Мы продолжаем его развивать внутри Surf и периодически дополняем этот опенсорс, когда доводим фичи до завершённого вида. Так, мы исправили некоторые баги при работе с форматом HLS, предложили решения для корректной работы с фоном и режимом PiP, детализировали ошибки, улучшили взаимодействие с операционной системой и её жизненным циклом.

Сейчас готовим улучшения по кастомизации буферизации, переключению треков, качеству видео и созданию плейлистов. Это сотни строк кода не только на Kotlin и Swift, но и много бизнес-логики на Dart — родном языке Flutter.

Написали бэкенд

Бэкенд сервиса мы разработали на Kotlin, Spring Boot и Kubernetes. Это современный стек, на котором мы разрабатываем большинство бэкенд-систем. Разработку дополнили сервисами: K8s, PostgreSql, ClickHouse, ELK-стек. 

Веб-серверы и CDN (сети доставки и дистрибуции содержимого) размещены у российских хостинг-провайдеров. Мы провели нагрузочное тестирование и замерили, как деградирует производительность микросервисов под нагрузкой. Это позволило ещё до запуска проекта найти и устранить несколько «бутылочных горлышек». Одной из таких проблем была система раздачи контента. 

Чтобы прогнозировать нагрузку в изменяющихся условиях, на бэке мы смотрим в Prometheus и Grafana, а скорость работы мониторим также со стороны клиента. В приложении используется Firebase Performance Monitoring — с его помощью измеряется время каждого запроса к API. Так мы определяем проблемные места в продакшене.

Вызовами для команды бэкенда стали:

  • выбор подходящего формата для передачи видео на клиенты;
  • создание логики по процессингу исходных видеороликов;
  • обеспечение хранения и передачи обработанных файлов.

Сделали веб-приложение

Разработали веб-приложение для управления контентом на React + Ant Design. Приложение позволяет публиковать видео и отправлять пользователям уведомления, добавлять мета-информацию и получать статистику о просмотрах в реальном времени.

Экран шоу в веб-приложении

Со временем MQ в качестве бэкенда и админки решили использовать свой собственный сервис, который идеально подходит под запросы контентмейкеров и пользователей.

Внедрили аналитику

Нам нужно было реализовать аналитику в реальном времени и иметь возможность строить кастомные отчёты и визуализировать их в веб-приложении. Стандартные системы аналитики мы использовать не могли: данные в них появляются с временной задержкой.

Чтобы получать аналитику по видео в реальном времени, потребовалось развернуть собственное хранилище пользовательских событий. Мы использовали облачную OLAP базу данных от Яндекса — ClickHouse. Эта БД работает под капотом у AppMetrica.

Приложение отправляет пользовательские события о взаимодействии с видео в ClickHouse, а все остальные интересующие нас пользовательские события — в AppMetrica и Firebase Analytics. Это наш стандартный выбор для аналитики, такой связкой мы пользуемся и на других проектах.

Управление сериями на главном экране

Провели бета-тестирование

Прежде чем запустить сервис, мы проверили приложение на тестовой группе. MQ опубликовал призыв участвовать в бета-тестировании — так мы получили 5000 бета-пользователей.

Подключили возможность управлять прероллами

В видео с тегом «премьера» запускается преролл — короткий рекламный ролик. Такие нативно интегрированные ролики отображаются в фоновом режиме и в формате «картинка в картинке». Управлять ими можно гибко в кастомной админ-панели.

Реализовали кастомный сплеш-скрин

При первом скачивании приложения появляется интро — имиджевое видео, собранное продакшеном MQ из самых ярких моментов разных шоу. Его можно пропустить, пересмотреть ещё раз или после просмотра пройти в приложение. У этого интро есть фанаты: они не только не ждут, когда оно скорее кончится, а наоборот: пересматривают его снова и снова. 

Добавили интерактив

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

Защитили авторский контент 

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

Наладили обратную связь

Добавили сразу три вида поддержки: 

  • форму обратной связи;
  • внутренние сообщения (отправляются техподдержкой MQ);
  • написали Telegram-бота, в котором собрали все часто встречающиеся вопросы и добавили возможность связаться с оператором поддержки. 

Настроили вывод со смартфона на TV

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

  • Подключили AirPlay. Эта технология Apple работает благодаря тому, что под капотом — нативный AVPlayer и воспроизведение в фоне.
  • Подключили ChromeCast на Android. Google предоставил CastFramework, а мы написали плагины для более удобной работы.
  • Защитили передачу данных от случайного вывода на чужой TV. Для того, чтобы просматривать контент, нужно быть в одной сети Wi-Fi с телевизором.
  • Оптимизировали работу плеера под слабые устройства. Провели исследование, сколько одновременно воспроизведённых роликов могут выдержать устройства.
  • Ввели метрики видео. Теперь можно отследить потерянные кадры и подсчитать кадровую частоту (FPS).
  • Внедрили смену качества «на лету» — видео больше не перезагружается, а подстраивается под выбранное качество.

Результат

  • Стали для клиента надёжным партнером
    MQ — творческие телевизионщики, продюсеры. Крутые креативные ребята, которые создали Comedy Club и успешные проекты на ТНТ и YouTube. Но они никогда до этого не делали IT-проекты, поэтому с техническими вопросами и первоначальным концепт-дизайном помогли мы. Получился продукт на стыке двух миров. Гордимся им вместе с MQ.
  • Сделали проект в сжатые сроки
    Изначально сказали клиенту, что дизайн и проектирование займут месяц, реализация — три месяца. Так и получилось: мы соблюли сроки. Теперь на практике знаем, сколько времени занимает сделать свой YouTube.
  • Выдержали нагрузку после запуска
    К нам пришло 5 000 бета-тестеров
  • Есть длинный план развития сервиса на будущее
  • Справились с челленджем: создали свой YouTube.
    Это была интересная и сложная задача для команды инженеров. Архитекторам и разработчикам очень понравилось работать над ней, и теперь они хотят ещё 😉
  • Заняли лидирующую позицию в сторах, опередив Rutube, TikTok и Кинопоиск.
Начните ваш проект с нами!
Прикрепить файл
    Eng Обсудить проект