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

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

C появлением таких сервисов, как Youtube и Vimeo, и таких направлений, как видеоблоги, вебинары и т. д., видео стало неотъемлемой составляющей глобальной сети и емейл-рассылок в частности.
В статье я разберу три способа, как разместить видеоконтент в теле письма. Кстати, примеры с HTML5-кодом можно копировать и вставлять в вёрстку, внося небольшие изменения.

Самый простой способ добавить видео — разместить в теле емейла ссылку на необходимый видеоролик. Такой подход прост, но неудобен — пользователю необходимо перейти на сторонний сайт, открыть интернет-браузер (если он пользуется почтовым клиентом) и только потом просмотреть ролик.

Рисунок 1:
ссылка на видеоролик в письме

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

Рисунок 2:
просмотр видео в письме

Это можно реализовать на 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-видео в письме поддерживают не все почтовые клиенты и веб-интерфейсы почтовых провайдеров. Например, Mail.ru и Gmail.com покажут альтернативный контент в виде изображения и ссылки в нашем случае. Чтобы посмотреть видео, подписчику придётся перейти из письма на сайт.

<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" width="320" height="176" /></a>

Чтобы не заставлять пользователя совершать лишние действия, разместите видео на слое. Для этого повесьте ссылку ролика на изображение, а само видео залейте на Youtube. Отмечу, что Mail.ru показывает видео не только из Youtube, но и из 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>

Для подсчёта кликов и наглядной статистики рассылки ESP экранирует прописанные в теле письма ссылки. В этом случае ссылка на Youtube не будет распознана и не откроется.
Чтобы этого избежать, отключите отслеживание кликов в платформе. Ссылка останется прямой и корректно откроется на слое в веб-интерфейсе Mail.ru и Gmail.com.

Рисунок 3: Gmail.com

просмотр видео в письме gmail.com

Рисунок 4: Mail.ru

просмотр видео в письме mail.ru

Где поддерживается

Компания Apple никак не определится со своими взглядами на тег HTML5 <video>. В версиях до iOS 7 включительно он был им люб, но в iOS 8 и iOS 9 перестали поддерживать. В последних версиях iOS 10 и iOS 11 его поддержку вернули.

У iOS 10/11 есть одна особенность — в качестве превью не отображается первый кадр видео, как это сделано в предыдущих версиях. Чтобы задать превью видео, используйте атрибут poster (poster=’’’’).

Рисунок 5: iOS 7
просмотр видео в письме iOS 7

Рисунок 6: iOS 10/11
просмотр видео в письме iOS 10/11

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

Итоги

Просмотр видео в письме — удобное решение для пользователя. Но любое отправленное емейл-сообщение имеет маркетинговую цель. В зависимости от конечной цели меняется подход размещения видео в письме.

  • Ваша цель: привлечь трафик на сайт. Используйте классический подход — разместите в теле емейл-сообщения изображение на видео с ссылкой на сайт.
  • Ваша цель: рост лояльности подписчиков. Проследите, чтобы видео проигрывалось в теле письма. Для этого используйте HTML5-видео или видео на слое (Mail.ru, Gmail).
    Ограничение этого метода одно, но существенное — вы не сможете собрать корректно статистику по переходам из емейла.
  • Ваша цель: привлечь подписчиков в ваш Youtube-канал. Не выключайте сбор статистики в ESP или вместо прямой ссылки вставьте сокращённую. Видео не будет проигрываться на слое, а перекинется в Youtube.
Поделиться статьёй:
Ac
Антон Чирков
Антон Чирков
Руководитель отдела разработки, EMAILMATRIX
Все рецепты автора
Комментарии