Проект

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

Заказчики: СТС Медиа (Сеть телевизионных станций)

Москва; СМИ, теле- и радиовещание

Продукт: Проекты ИТ-аутсорсинга

Дата проекта: 2018/01 — 2018/04
Технология: ИТ-аутсорсинг
подрядчики - 850
проекты - 2653
системы - 181
вендоры - 122

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

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

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

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

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

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

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

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

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

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

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

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

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