,

Добавляем видео в шаблон письма

video
Большинство компаний, начавших использовать видео в своих email рассылках, отмечают рост интереса к рассылке, выражающийся в увеличении процента открытий писем и переходов на сайт, а также конверсии в заказы. И конечно, ярким и необычным роликом хочется поделиться с друзьями и пересмотреть не один раз!
Большинство российских рассыльщиков не используют видео в письмах. Возможно, одной из причин непопулярности добавления видео в рассылку являются сложности в создании шаблона, позволяющего корректно отображать видео на любом устройстве в любом браузере и почтовом клиенте при отсутствии поддержки HTML5 у большинства почтовых клиентов. Тем не менее, мы хотели бы познакомить Вас с довольно успешным опытом добавления видео в письмо, рассказанным нашими зарубежными коллегами из Emailonacid, на примере шаблона (скачать шаблон):

13_01_14_video_html

Как видно из таблицы ниже, HTML5 поддерживают еще немногие почтовые клиенты. Открыв письмо в этих клиентах, Вы можете запустить плеер прямо в рассылке. При просмотре в веб-клиентах, единственным решением пока является добавление fallback ( back up) картинки c ccылкой на соотвествующий источник, содержащий видео. К сожалению, при тестировании в основных российских почтовых клиентах, обнаружилось,что yandex не показывает даже back up картинку, полностью игнорируя содержимое, заключенное между тегами video. Вынос back up картинки за пределы тега также не приносит результата- back up картинка появляется только при удалении этого тега из шаблона. Поэтому для Ваших подписчиков на yandex придется привязать ссылку на видео к названию ролика.

13_01_14_video_clients

Каким же образом было достигнуто оптимальное отображение видео ролика в остальных клиентах? В собственном клиенте Android устройств возникала проблема с отображением видео – плеер отображался, но ролик не подгружался и пользователь видел лишь белый или серый экран плеера. Чтобы отобразить back up картинку, в стили был добавлен медиа-запрос для большинства устройств на Android – @media screen and (max-width:800px), с помощью которого div class “video holder” был скрыт, а видимым оказывался div class “Android”, отображающий картинку с ссылкой на видео.
Далее медиа-запрос был переписан специально для проигрывания видео в клиенте для iPhone и iPad с указанием соответствующего разрешения устройства.
Обязательным условием для проигрывания видео в браузере Firefox является изменение некоторых настроек на сервере. Важно, чтобы ваш сервер отдавал правильный тип контента MIME для видео файлов. Заголовок видеофайлов Content-Type должен быть не text/plain, а соответствующий формату файла. Так, при использовании сервера Apache, необходимо добавить файл .htacess в директорию, где хранятся видеофайлы, указав с помощью AddType следующие типы контента :
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType audio/mpeg .mp3
AddType audio/ogg .ogg
AddType audio/mp4 .m4a
AddType audio/wav /wav
Проблемы с проигрыванием видео возникают и в Outlook, поэтому,используя “.ExternalClass” специфичный для Outlook, проигрывание видео внутри клиента было заменено на отображение back up картинки с ссылкой на видео.
Для корректного отображения данного шаблона не забывайте, что back up картинка должна быть такого же размера, что и размер видео, которое Вы используете.В любом случае, трудности, связанные с использованием HTML5, не должны закрывать перед Вами возможности и преимущества использования видео в рассылках. Используйте GIF-анимацию или эффектную картинку с кнопкой Play и ссылкой на Ваше видео! Интерактивность, динамичность и оригинальность Вашего письма – это лучший способ выделиться из серой массы конкурентов, подарив новые впечатления Вашим подписчикам!
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply