Видео в письмах HTML 5 – это уже реальность!

HTML5, последняя версия языка HTML, находится на стадии разработки. Однако такие интернет-гиганты как Firefox, Safari, Chrome и Opera уже активно работают в новом формате. Код HTML5 поддерживается сегодня многими браузерами и программами. Сегодня поговорим о видео в письмах html 5 формата.

Особый интерес представляет тег <video>. Его предназначение заключается в том, чтобы рендировать видео в письмах html 5 из различных форматов, не прибегая к помощи, скажем, Flash-проигрывателя. Идея универсального кодека — это пока только идея, однако уже сейчас есть емейл-проекты, работающие с новым тегом. Он используется для программ, которые поддерживают формат HTML5. Если же показ видео невозможен — действуют привычные механизмы воспроизведения, которые будут описаны ниже.

Современные подходы к видео в емейлах

До появления HTML5, то есть, еще совсем недавно, просмотреть видео из письма можно было либо прямо в емейле (если ваш клиент поддерживает формат ролика), либо нажав на изображение плеера и перейдя на веб-страницу с этим видео.

Увы, просмотреть видео удавалось только пользователям Apple Mail, поскольку только этот почтовый клиент стопроцентно поддерживает формат Flash.

Мораль здесь вот в чем. Если существует вероятность того, что видео не будет проигрываться во многих емейл-программах, необходимо продумать план B. Все маркетологи это понимают, но до появления тега <video> для вставки видео-ролика в письмо использовался тег <object>, который блокируeтся большинством клиентов, следовательно, план B невозможен.

HTML5 и ничего лишнего

Итак, если тег <video> не срабатывает, можно воспроизвести видео через QuickTime или Flash. Однако в случае с емейлом всё иначе: оба плеера блокируются практически всеми емейл-клиентами.

Из-за существующего кодек-конфликта (формат H.264 поддерживается Apple и Google, а Ogg Theora — Mozilla и Opera) необходимо представить свое видео в обоих форматах. Но, опять же, электронная почта — особый случай. Единственный популярный емейл-клиент, использующий Gecko (браузерный движок, поддерживающий форматы семейства Mozilla), — это Thunderbird, и именно эта почтовая программа в настоящее время отказывается проигрывать HTML5-видео. Таким образом, ещё одна опция исключается. Хотя, если вы точно знаете, что многие из ваших подписчиков просматривают веб-версии писем, можно добавить формат Ogg Theora в параметры рассылки, специально для пользователей Firefox.

Конечный код

Вот пример кода без лишних параметров (которые всё равно не сработают в случае с большинством емейл-программ).

<video width="640" height="360" poster="fallback.jpg" controls="controls">
<source src="http://mysite.com/videoname.mp4" type="video/mp4" />
<a href="http://mysite.com/"><img title="видео в письмах html 5" src="fallback.jpg" width="640" height="360" /></a>
</video>

Как видно из приведенного примера, preview-картинку вместе с высотой и шириной видео в письмах html 5 вы вписываете в тот самый тег <video>, о котором говорилось выше. Вы также помещаете в тег ссылку на закодированный вашим сервером файл, который будет открываться прямо в письме (если, конечно, почтовая программа позволит).

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

Результаты

В Apple Mail видео ренидируется без каких-либо проблем. В почте iPhone — тоже!

Что касается самых популярных почтовых веб-интерфейсов — Yahoo!, Gmail и Hotmail — к сожалению, эти программы не проигрывают вложенные видео. Однако есть и положительные моменты. Preview-картинки отображаются абсолютно во всех случаях, а клик по окну видео переводит пользователя на сайт, где можно просмотреть ролик.

То же самое можно сказать и обо всех системных почтовых клиентах: если видео не проигрывается прямо в программе, выбранная для preview картинка всё равно видна, а клик по ней позволяет перейти на страницу с видео-материалом.

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

Ниже будут рассмотрены случаи использования нового способа кодирования видео для самых популярных почтовых программ.

Apple Mail 4

При открытии письма в Apple Mail preview-изображение высвечивается как только вы запускаете видео. Через несколько секунд появляются кнопки плеера, а также ползунок состояния загрузки, и — видео начинает проигрываться!

iPhone 3.1.2

Используя iPhone, нельзя посмотреть видео через браузер, а также в самом письме. При наличии в емейле видео-контента перед вами сразу же появляется сообщение о том, что клик по preview-картинке вызовет QuickTime player, в котором вы и сможете просмотреть свое видео. По окончании ролика вы автоматически возвращаетесь к тексту электронного сообщения.

Outlook 2007

Как и другие почтовые клиенты, не поддерживающие HTML5-видео, Outlook 2007 успешно показывает выбранную для предпросмотра картинку (которую вы прописали с помощью соответствующего тэга). Следует заметить, что заглавное изображение выбирается на ваше усмотрение. Как правило, это — скриншот из видео-ряда и значок «Play», подсказывающий пользователю, что нужно делать дальше: клик по изображению позволяет просмотреть видео через браузер, на вашем сайте.

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

Технология Liveclicker Video Email

Если вы хотите, чтобы видео воспроизводилось в большинстве случаев, есть ещё один вариант. Разработчики Liveclicker Video Email Express приводят очень привлекательную статистику успешного просмотра видео в емейлах с использованием этой технологии — от 75% до 90%.

Вот ещё несколько характеристик Liveclicker:

• Загрузка видео по одному клику
• Работает со всеми ESP и платформами рассылок
• Мгновенно распознает версию почтового клиента и предлагает соответствующий видео-проигрыватель
• Поддерживает различные форматы видео: .GIF, HTML5, CertifiedVideo™.
• Безопасный сценарий для клиентов, не поддерживающих формат
• Интегрированная система контроля воспроизведения

Как это работает

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

Сэкономьте свое время

С Liveclicker вам не надо механически подстраивать формат видео под каждую емейл-программу — умная технология сама распознает параметры почтового клиента и проделывает нужный алгоритм.

Вот как рендируются видео-файлы в различных почтовых клиентах:

• iPad/Apple Mail 4 — .mp4-видео, закодированное в H.264 — проигрывается с помощью HTML5 <video>-тега
• iPhone — .mp4-видео, закодированное в H.264 — проигрывается с помощью HTML5 <video>-тега
• Thunderbird — .ogv-видео (закодированное в OGG Theora) — проигрывается с помощью HTML5 <video>-тега
• Firefox webmail (Gmail, Yahoo Mail, Windows Live Mail и др.) — PNG-видео
• Chrome, IE7, IE8 (Gmail, Yahoo Mail, Windows Live Mail и др.) — быстрая анимация, .GIF-видео
• Safari — анимация медленнее, .GIF с кодировкой для ускорения загрузки видео
• Медленное соединение, мобильные устройства, не поддерживающие технологию HTML5 — медленная анимация, .GIF
• IE6 (Gmail, Yahoo Mail, Windows Live Mail и др.) — несжатое анимированное .GIF-видео
• Apple Mail 3, iPad/Safari, iPhone/Safari, Mac/Chrome — анимированное .GIF-видео
• Outlook 2007, Outlook 2010 — неподвижная картинка
• Lotus Notes — анимированное .GIF-видео с изменяемым контентом
• .FLV (высокая пропускная способность) — только на целевой странице
• .FLV (высокая пропускная способность) — только на целевой странице
• Для всех остальных клиентов видео проигрываться не будет. Вместо этого будет отображаться preview-картинка либо будет воспроизводиться анимированное видео в формате .GIF

Mail.ru

В настоящий момент, по словам представителей Почты Mail.ru, прямо в письмах видео не проигрывается. Но если в емейле есть линк на видеохостинг (например, на youtube) — то при клике откроется видеоплеер в интерфейсе почты, и можно будет просмотреть ролик в отдельном окне браузера. Сейчас поддерживается большинство популярных видеохостингов.

Выводы

Итак, HTML5 значительно расширяет возможности емейл-маркетинга с использованием видео-контента. Несмотря на существующие ограничения (видео воспроизводятся напрямую только в клиентах Apple), новая кодировка позволяет улучшить ситуацию для почтовых клиентов, не поддерживающих формат HTML5 (стопроцентно отображаемая preview-картинка либо анимированное видео). Если ваш емейл-лист состоит преимущественно из пользователей продуктов Apple, тег <video> — то, что вам нужно. Но даже если это не так — грамотно написанный код либо технология типа Liveclicker помогут вам решить проблему воспроизведения видео в большинстве почтовых программ.