Видеоплеер HTML5 от Инвентос — кроссплатформенность + реклама

Сегодня мы хотим рассказать о нашей очередной разработке — HTML5-плеере. Плеер поддерживает воспроизведение видео в формате mp4 на всех основных мобильных платформах:

iPad (iOS 5.1.1): Chrome 29, Safari 5.1
iPhone (iOS 6.1.3): Safari 6
Android (4.0.4): Chrome 32, Firefox 28, Опера 16
Windows Phone: IE 10.0

Основным технологическим преимуществом нашего плеера является то, что он обладает возможностью показа рекламы на базе стандарта VAST 2.0, работает с системой AdFox. То есть плеер умеет обрабатывать XML фиды VAST 2.0 с содержимым Linear Ad и WrapperAd. При этом формат рекламного ролика — любой, который способно будет проиграть ваше устройство (см. документацию вашего устройства).

Внешний вид HTML5-плеера в режиме показа рекламы выглядит следующим образом:

Воспроизведение рекламных видеороликов в HTML5-плеере поддерживается в следующих версиях мобильных платформ и их браузеров:

iPad (iOS 7.1): Chrome 33;
Android (4.0.4): Chrome 32, Firefox 28, Opera 16;
Windows Phone: IE 10.0.

Благодаря обширному охвату медиаустройств, данная функция способна приносить хороший доход, ведь согласно данным, предоставленным счетчиком Li.ru, аудитория мобильных платформ составляет до 40% всех пользователей и эта цифра постоянно растет. Более того, если раньше смартфон рассматривался и использовался в первую очередь именно как «мобильник», как средство связи с не очень-то востребованными дополнительными функциями, то за последний год ситуация изменилась радикально — сейчас смартфон зачастую является основным окном для выхода в Интернет, особенно в регионах. (По данным ROEM.RU)

При работе над интерфейсом плеера мы постарались учесть интересы пользователей — владельцев девайсов с небольшим экраном, и теперь размер иконок управления удобен к тапанию на любых гаджетах, а сами иконки масштабируются без потери качества. В целом, интерфейс плеера идентичен для пользователей различных платформ (iOS, Android и WindowsPhone). Исключение составляет внешний вид в полноэкранном режиме просмотра на некоторых устройствах — при переходе к полноэкранному виду интерфейс может содержать встроенные в браузер контролы, соответствующие устройству.

Код видеоплеера полностью реализован на языке JavaScript (с применением HTML, CSS). Мы решили отказаться от использования js-фреймворков при разработке плеера, что позволило повысить производительность и убрать внешние зависимости.

Все привычные пользователю функции в нашем плеере реализованы: начало воспроизведения, приостановка воспроизведения, переход в полноэкранный режим, полная остановка воспроизведения, повторное воспроизведение, функция переключения качеств, перемотка, управление громкостью.

Кроме выше перечисленного, в нашем плеере реализована возможность просмотра видеоцитат (фрагмент ролика, начало и конец которого отмечен пользователем) с последующим переходом на полную версию ролика (при желании).

В плеере предусмотрен сбор статистических данных по разнообразным событиям: ролик загружен, ролик выбран, начало просмотра, первая четверть просмотра, середина просмотра, третья четверть, завершение просмотра, клики по крестику закрытия, переход на сайт рекламодателя, пропуск рекламы, вкл/выкл звука и т.д. То есть поддерживаются все основные события по стандарту VAST. Кроме того, по запросу заказчика возможен учет нестандартных событий (например, 5 секунд от начала просмотра). Статистические данные отправляются в виде HTTP-запросов на указанный URL. Имеется также возможность реализации своего сервера статистики.

Что касается дальнейших планов — на сегодняшний день запланированы и уже ведутся работы по совершенствованию продукта в следующих направлениях:

  • поддержка HTTP Live Streaming на iOS, Android и в некоторых десктопных браузерах;
  • поддержка счетчика Google Analytics для сбора статистики;
  • функции работы с плейлистами;
  • скинирование;
  • поддержка p2p для экономии трафика! (подробности на http://p2pjs.pro)

Мы постарались сделать максимально удобный и интересный для владельцев видеоресурсов плеер, так что надеемся на сотрудничество, пишите нам ask@webcaster.pro !

У нас есть похожие новости по этим темам:
Наверх

Leave a Reply

Войти с помощью: 

Your email address will not be published. Required fields are marked *