СТС Медиа (Сеть телевизионных станций) (Проекты ИТ-аутсорсинга)

2018: Разработка HTML5-плеера

Проект по разработке медиа-плеера стал уже пятой совместной разработкой компании "СТС Медиа" и "Центра Высоких Технологий".

Для заказчика СТС HTML5-плеер — один из якорных проектов. Качество и удобство воспроизведения видео онлайн является неоспоримым конкурентным преимуществом, поэтому компанией "СТС Медиа" было принято решение о разработке быстрого плеера, который будет встраиваться на все площадки.

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

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

• воспроизведение видео;
• перемотка видео;
• шаринг (sharing);
• переключение качества;
• формирование пула связанного контента и переключение между ним;
• автоопределение качества в зависимости от пропускной способности канала пользователя;
• таймлайн с превью кадром;
• управление видео с клавиатуры;
• просмотр рекламы;
• подписка;
• возможность адаптации дизайна;
• сбор статистики.

Плеер представляет собой приложение на ES6, состоящее из нескольких модулей:

• основной модуль плеера (отвечает непосредственно за проигрывание видео);
• контролы плеера;
• модуль рекламы (тут реализованы все 6 типов рекламы, поддержка vast/vpaid);
• модуль шаринга в соцсети (Facebook, VK, Одноклассники, Telegram (только на мобильных устройствах));
• pop-up-контейнер для других модулей, например, для share;
• модуль для отображения сообщений о различных ошибках;
• модуль, используемый для удобства разработки (переключение проектов, генерация ошибок, изменение скинов и т.п.).

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

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

Поскольку каждая из площадок "СТС Медиа" имеет свой brand book, целевую аудиторию и опыт пользователей, важно было обеспечить должную гибкость.

Специалисты ЦВТ предоставили возможность каждой площадке менять плеер под себя, в том числе изменять количество "контролов", их цвета и расположение.

На апрель 2018 года СТС HTML5-плеер используется на сайтах "Видеоморе", "Че", "Домашний". Он воспроизводится в любом браузере поддерживающим HTML5 и JS5. Видео доступно к просмотру на мобильных устройствах.