Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга

Просмотр видео внутри письма. Варианты реализации

Времена «диалапа» давно прошли, и видео на сайте из некой диковинки (интересной, но неповоротливой) стали привычным дополнением текстового и графического контента. Появление таких сервисов, как Youtube, Vimeo и таких направлений, как видеоблоги, вебинары и т. д. сделали видео неотъемлемой частью глобальной сети.

Классическим вариантом использования видео в письмах является вставка ссылки на сайт, содержащий данный видеоролик. Подход очень прост, но неудобен — пользователю необходимо перейти на сторонний сайт, и, возможно, открыть интернет-браузер, если он пользуется почтовым клиентом.

Переход из письма на сторонний сайт

Гораздо удобнее смотреть видео непосредственно в письме (особенно, если видеоролик длится всего пару минут).

просмотр видео непосредственно в письме

HTML5 позволяет реализовать эту задачу, но лишь частично:

<video width="320" height="176" poster="http://yoursite/img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="http://yoursite/img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="http://yoursite/img/mov_bbb.ogg"></source>
	<source type="video/webm" src="http://yoursite/img/mov_bbb.webm"></source>
	<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" width="320" height="176" /></a>
</video>

В параметрах width и height, соответственно, указывается ширина и высота видеоблока; poster — изображение, которое будет показано, пока видео не запущено; controls добавляет панель управления к видеоролику. Если браузер\почтовый клиент пользователя не поддерживает HTML5, то он увидит изображение и ссылку.

Письма, как всегда, в технологическом плане отстают, и html5-видео имеет весьма ограниченную поддержку как почтовыми клиентами, так и веб-интерфейсами почтовых провайдеров. В частности, наиболее популярный в России Mail.ru или за рубежом Gmail.com отобразят альтернативное изображение.

Но данные веб-интерфейсы могут отображать видео на слое, без перехода на сторонний сайт. Для этого ссылку на ролик нужно повесить на изображение, а сам ролик разместить на Youtube. Стоит также отметить, что Mail.ru также умеет отображать и видео, расположенное на Vimeo. А для обеспечения наибольшего охвата аудитории, следует совместить оба подхода:

<video width="320" height="176" poster="img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="img/mov_bbb.ogg"></source>
	<source type="video/webm" src="img/mov_bbb.webm"></source>
	<a href="http://www.youtube.com/watch?v=YE7VzlLtp-4"><img src="img/backup_bunny2.jpg" width="320" height="176" /></a>
</video>

Поддержка

Самая серьезная проблема с html5 video наблюдается в iOS 8 — у некоторых пользователей ни на сайтах (Safari), ни в письмах видео не работает (не реагирует на нажатие кнопки play). Проблема актуальна для iPhone 6 (6 Plus) и всех устройств, обновленных до iOS 8. В апдейте до версии 8.1.1 проблема все еще не была решена, но ожидается ее исправление в ближайшем будущем. Отдельно нужно сказать про веб-интерфейс Outlook.com — помимо того, что он поддерживает html5-видео, он также перед письмом показывает превью видеороликов на Youtube, ссылки на которые есть в письме.

Наименование Поддержка
Gmail   
Mail.ru   
Rambler  
Yandex  
Outlook.com   
Yahoo  
Outlook (2003, 2007, 2010, 2013)  
Mozilla Thunderbird  
Apple Mail  
Mail (iOS)  
Почта (Android)  
Gmail (iOS, Android)  

Как это выглядит

Gmail:

gmail_video

Mail.ru:

Просмотр видео в Mail.ru

Outlook.com (помимо поддержки html5-видео, он показывает перед письмом превью ролика с youtube, который тут же можно воспроизвести):

Просмотр видео в Outlook

Mail (iOS):

Просмотр видео в iOS

Итоги

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

  1. Если вы размещаете видео на собственном сайте и хотите привлечь на сайт трафик, то лучше всего будет использовать классический подход — изображение со ссылкой на сайт.
  2. Если это письмо направлено на повышение лояльности подписчика, то лучше использовать html5 видео или видео на слое (mail.ru, gmail). Пользователю будет удобно просмотреть данный ролик, что он, скорее всего, и сделает, однако однозначно зафиксировать данный факт не удастся (сбор статистики по кликам придется отключить, чтобы ссылки не были преобразованы). Вы сможете лишь оценить количество просмотров ролика на youtube и количество запросов к видео-файлам. Но с точностью судить о канале(письма, соц.сети, рекламные объявления и т.д.), с которого пришел пользователь не получится.
  3. Если вы размещаете ролики на Youtube-канале и вам важен переход из письма на Youtube, позаботьтесь о том, чтобы видео не открывалось на слое, включив сбор статистики по кликам (в используемой емейл платформе) или воспользуйтесь любым сервисом «сокращения» ссылок.

Пользователи iOS-устройств обычно составляют значительную часть тех, кто использует мобильные устройства для просмотра своей корреспонденции. А с учетом склонности большинства из них использовать последнюю версию ОС, до тех пор, пока не будет решена проблема с воспроизведением HTML5 video в iOS 8, лучше избегать этого метода, в пользу использования видео на слое (Mail.ru, Gmail).

Автор: Антон Чирков, EmailMatrix

Поделиться статьёй:
Ac
Антон Чирков
Антон Чирков
Руководитель отдела разработки, EMAILMATRIX
Все рецепты автора
Комментарии