Заказчики: СТС Медиа (Сеть телевизионных станций) Москва; СМИ, теле- и радиовещание Подрядчики: Центр Высоких Технологий (ЦВТ) Продукт: Проекты ИТ-аутсорсингаДата проекта: 2018/01 — 2018/04
|
Технология: ИТ-аутсорсинг
|
2018: Разработка HTML5-плеера
Проект по разработке медиа-плеера стал уже пятой совместной разработкой компании "СТС Медиа" и "Центра Высоких Технологий".
Для заказчика СТС HTML5-плеер — один из якорных проектов. Качество и удобство воспроизведения видео онлайн является неоспоримым конкурентным преимуществом, поэтому компанией "СТС Медиа" было принято решение о разработке быстрого плеера, который будет встраиваться на все площадки.
Не менее важной задачей была реализация рекламного контента. У заказчика существует около шести различных типов рекламы. Было необходимо предоставить управление пользователю рекламным контентом в зависимости от типа платной подписки, которую он использует.
При разработке решения со стороны заказчика были предоставлены дизайн, аналитика по проекту и требования к продукту. Со стороны ЦВТ оставалась архитектура и техническая реализация. В функционал приложения было заложено следующее:
- воспроизведение видео;
- перемотка видео;
- шаринг (sharing);
- переключение качества;
- формирование пула связанного контента и переключение между ним;
- автоопределение качества в зависимости от пропускной способности канала пользователя;
- таймлайн с превью кадром;
- управление видео с клавиатуры;
- просмотр рекламы;
- подписка;
- возможность адаптации дизайна;
- сбор статистики.
Плеер представляет собой приложение на ES6, состоящее из нескольких модулей:
- основной модуль плеера (отвечает непосредственно за проигрывание видео);
- контролы плеера;
- модуль рекламы (тут реализованы все 6 типов рекламы, поддержка vast/vpaid);
- модуль шаринга в соцсети (Facebook, VK, Одноклассники, Telegram (только на мобильных устройствах));
- pop-up-контейнер для других модулей, например, для share;
- модуль для отображения сообщений о различных ошибках;
- модуль, используемый для удобства разработки (переключение проектов, генерация ошибок, изменение скинов и т.п.).
Каждый модуль независим. Замена любого из них безболезненна для проекта в целом. Это дает возможность распределения задач по разным проектным командам в будущем.
Другой технической особенностью проекта является моментальное обновление плеера. С помощью iframe СТС может обновить плеер без задействования команд разработки у контрагентов.
Поскольку каждая из площадок "СТС Медиа" имеет свой brand book, целевую аудиторию и опыт пользователей, важно было обеспечить должную гибкость.
Специалисты ЦВТ предоставили возможность каждой площадке менять плеер под себя, в том числе изменять количество "контролов", их цвета и расположение.
На апрель 2018 года СТС HTML5-плеер используется на сайтах "Видеоморе", "Че", "Домашний". Он воспроизводится в любом браузере поддерживающим HTML5 и JS5. Видео доступно к просмотру на мобильных устройствах.