У Национальной Медиа Группы есть много  ТВ-каналов — СТС, Че, Dомашний, Пятый, РЕН ТВ и многие другие. Само собой, у каждого канала есть свой сайт, на котором транслируется соответствующий видеопоток. И не ТВ-каналами едиными: ещё есть онлайн-кинотеатр more.tv со своими особенностями.

В плане показа видеоконтента плеер играет ключевую роль. 

Во-первых, он, собственно, и даёт возможность смотреть видеопоток. Во-вторых, плеер как сущность должен поддерживать возможность показа рекламных вставок (это важная часть бизнеса и развития ресурсов). В третьих, при всё этом плеер должен отвечать современным стандартам разработки и, что называется, “не тупить” — ведь если плеер на вашем сайте подглючивает, не сохраняет прогресс или просто грузится по полминуты, то зритель всегда найдёт, где ему ещё посмотреть нужные ролики. Благо альтернативы есть.

В этом посте мы расскажем, как развивали и дорабатывали наш видеоплеер, с помощью которого и отображается контент на всех сайтах Группы. Первый пост будет верхнеуровневым, поэтому, пожалуйста, оставляйте комментарии, если вас заинтересуют какие-то конкретные возможности плеера или решения — по возможности расскажем обо всём подробнее.

Что вообще представляет собой текущий плеер

Мы используем самописное решение, потому что помимо основной функции (трансляции видеопотока) нам нужно для каждого канала еще показывать рекламу, причем разных форматов, а также добавлять элементы управления. Которые могут быть уникальными для каналов — где-то нужна какая-то функция, а где-то без нее можно вполне себе обойтись.

Пример интерфейса плеера на сайте канала СТС

Исходная версия нашего плеера была довольно старой (её более восьми лет), так что нагромождение костылей, рандомных связок и легаси внутри было весьма и весьма внушительным. Бросить всё это на произвол судьбы и начать делать своё новое решение с пылу с жару было бы довольно опрометчиво, потому что это и долго, и дорого.

Главная проблема здесь не столько в деньгах и во времени, сколько в том, что на рынке сейчас мало людей, которые на самом деле хорошо умеют работать с видеопотоками. Особенно, если мы говорим о высоконагруженных сервисах — общая аудитория только эфирных каналов НМГ составляет 54 миллиона россиян (Mediascope. TV Index. Россия 0+, население 4+ лет. период: 01.12.21–24.02.22)

В общем, от нас требовалось многое основательно переделать, при этом достигнув трёх важных целей:

1. Поддержать то, что уже работает. Здесь мы имеем в виду нормальное отображение всех заявленных форматов видео, а также стабильную работу использующихся рекламных форматов. Перефразируя классику — “Раз работало, то пусть работает”.

2. Добавить в плеер новые функции. За время, прошедшее с создания первой версии плеера, вышло несколько более современных рекламных форматов, и нам нужно было обеспечить их поддержку. Кроме этого, плеер должен органично вписываться в дизайн каждого из наших сайтов, а значит — нужна полноценная поддержка скинирования. Причём мы говорим не просто о том, чтобы покрасить рамки и кнопки в основные цвета сайта — речь ещё и о быстром включении-выключении интерактивных элементов управления. И скинирование мы хотели сделать самостоятельным механизмом, который можно было бы без проблем дорабатывать по мере необходимости.

3. Перевести всё с JavaScript на TypeScript. В рамках more.tv мы как раз переводили всё на TypeScript, поэтому хотелось унификации, чтобы не приходилось поддерживать небольшой зоопарк.

Проблемы

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

Как мы писали выше, на рынке мало спецов по этой теме. Так что выходом стало начать выращивать таких людей внутри компании, чем мы и занимаемся.

Кроме новых возможностей JavaScript и TypeScript, за эти годы появились и новые форматы рекламы, которые можно интегрировать в плеер. С рекламой, к слову, всё всегда сложно, потому что это очень чувствительная тема. У пользователя любая реклама в целом вызывает раздражение — человек же прежде всего приходит видео посмотреть, хорошо бы ещё и в хорошем качестве онлайн и бесплатно. Чего пока можно достичь сотрудничеством с рекламодателями, если мы говорим о легальном просмотре.

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

Кстати, о рекламе. Вот какие форматы сейчас используются в плеере:

• Видеореклама pre/mid/post roll. Формат, при котором пользователю показывается небольшой ролик от рекламодателя до, во время или после просмотра искомого контента. Не превышает 30 секунд.

• Интерактивная реклама (VPAID) pre/mid/post roll. Почти то же самое, что и первый формат, но в дополнение ко всему содержит внутри небольшие ссылки и кликабельные элементы, дающие возможность перейти на сайт рекламодателя или страницу продукта.

• Интерактивная реклама на паузе — как понятно из названия, показывается только во время приостановки воспроизведения.

• Баннерная реклама на запуске видео и при воспроизведении в заданных точках.

Что мы получили после всех оптимизаций

Страница с плеером стала ощутимее быстрее грузиться — до начала работ сайты каналов грузились порядка 6 секунд, сейчас это время удалось сократить до 3,5. То же самое касается и работы плеера на мобильных устройствах (приложения отдельных каналов и браузерные версии их сайтов), здесь теперь до первого интерактива проходит не более 5 секунд. Полноценно поддерживаются все необходимые форматы рекламы, проблемы с их отображением не возникает.

Была обновлена и архитектура, теперь диаграмма слоёв видеоплеера выглядит так:

Подросли показатели, важные для бизнеса: количество показов в обычные дни составляет около 1 миллиона DAU, а в пике может превышать и 3 миллиона. 

Самое главное, нам удалось снизить количество ошибок проигрывания. Раньше этот показатель мог достигать порядка 10% на воспроизведение единицы контента (в доле от всех пользовательских сессий), сейчас эта цифра — около 2-3%, и мы стараемся минимизировать её ещё сильнее.