HTML 5 и Видео в Электронной почте

Наблюдая за стремительным развитием HTML5, мы не обращаем внимания на то, как развивается HTML в электронных письмах. Хотя многие тонкости HTML5 все еще в стадии разработки, Firefox, Safari, Opera и Chrome уже предложили поддержку большей части новой технологий.

Особый интерес у меня был к HTML5 тегу <video> .  Этот тег должен был решать проблему со встроенной поддержки видео, с помощью одного кодека, во всех браузерах, без необходимости использования плагинов, таких как Flash. Хотя идея использовать универсальный кодек кажется утопичной, есть проект, который предлагает использовать тег <video> в браузерах, которые его поддерживают, а в остальных просто скрывать содержимое этого тега.

Современные подходы использования видео в электронной почте.

Это не первый раз, когда нам приходится внимательно смотреть на поддержку видео в электронной почте. В наших предыдущих исследованиях мы искали подход, который позволил бы встраивать видео в почтовые клиенты, которые поддерживают тег <video>, а для тех, которые этого не делают, показывать интерактивные изображения (что бы затем воспроизводить видео в браузере).

Результаты нас разочаровали. Только Apple Mail поддерживает достойное воспроизведения видео с помощью Flash, и все равно не было способа обеспечить альтернативное отображение содежимого для тех, у кого Flash отсутствует. Я считаю, что в этом-то и заключается основная проблема. Если видео не отображается, то надо показывать альтернативное содержимое. Поскольку большинство почтовых клиентов использую тег <object> для вставки видео, было не возможно вывести альтернативное содержимое.

Должно быть какое-то решение проблемы, возможно HTML5 смог бы решить ее. Как оказалось я был наполовину прав.

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

Используя продукт Kroc Camen «Видео для всех», как отправную точку, я быстро понял, что подход для браузера должен быть другим нежели для почтовых клиентов.

Техника Kroc представляла собой многоуровневую поддержку. Таким образом, если HTML5 <video> не доступен, вы можете использовать возврат к QuickTime или Flash и почти всегда  видео будет гарантировано работать. Поскольку нам известно, что Flash и QuickTime повсеместно заблокировали в электронной почте, я отбросил это простое решение.

Из-за войны форматов, о которой я упоминал ранее, вы должны предоставить свои видеоматериалы, как H.264 (для поддержки Apple и Google) и Ogg Theora (для поддержки Mozilla и Opera). В электронной почте все несколько иначе. Единственным популярным почтовым клиентом, использующим Gecko (движок Firefox) является Thunderbird, который сейчас не поддерживает HTML5 отображения видео. Таким образом, ни Flash / Quicktime, ни 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 src="fallback.jpg" width="640" height="360" /></a>
</video>

Как вы видите, вы предоставляете альтернативу в виде изображения (которое удобно загружается, как превью для фильма, перед просмотром электронной почты для клиентов, которые поддерживают видео) в теге <video> вместе с шириной и высотой видео. Вместе с тегом <video> вы подключаете кодированное видео с помощью H.264 используя тег <source>, помня, что вы должны поставить ссылку на существующий файл на вашем сервере.

Наконец, мы добавляем альтернативное содержание, которое нужно будет отображать в любом почтовом клиенте, который не поддерживает HTML5 тег <video>. Это, как правило, интерактивные скриншоты из видео, при нажатии на которые, видео будет играть в браузере.

Результаты

Работая на Mac, моя первая остановка была на Apple Mail. Видео отображалось прекрасно. Далее мой iPhone, который замечательно проигрывал видео с помощью встроенного почтового клиента.

Тогда я обратился к популярным веб-клиентам электронной почты — Yahoo!, Gmail и Hotmail. К сожалению, оказалось, что веб-клиенты отключают проигрывание HTML5 видео. Хотя это было разочарованием, не все оказалось так плохо. На месте видео я был в состоянии отображать альтернативное содержимое. В данном случае это было кликабельное изображение, с которого я мог поставить ссылку на видео, находящееся на моем сайте. Этого никогда не было раньше, поэтому было большим успехом.

Поэтому я стал проверять дальше, и получил такие же результаты на десктопных e-mail клиентах ПК. Видео не прогрывается, но появляется альтернативное содержимое во всех клиентах, которые я тестировал. Здесь полные результаты моего тестирования.

Результаты тестирование видео в различных e-mail клиентах

Результаты тестирование видео в различных e-mail клиентах

Посмотрите это в действии

Чтобы вы поняли, как выглядит HTML5 видео в различных популярных e-mail клиентах, вот несколько скриншотов.

Apple Mail 4

Когда я открыл письмо в Apple Mail, альтернативное изображение, которое я указал в атрибутах, было показано в то время когда фильм начал потоковое вещание. Через несколько секунд появились управляющие элементы видео, и я мог увидеть progress bar и начать его смотреть.

iPhone 3.1.2

IPhone не поддерживает потоковое видео в браузере или почтовом клиенте, вместо этого вы нажимаете на ссылку с превью изображения и можете оперативно посмотреть ролик. При клике на изображение они загружается в QuickTime Player’s iPhone. После просмотра ролика вас перемещают обратно к просмотру письма.

Outlook 2007

Как и все почтовые клиенты, не поддерживающие видео HTML5, Outlook 2007 отображает альтернативное содержимое, которое мы указываем в рамках видео-тегов. Это может быть любой HTML, какой вам нравится, и не ограничивается только одним изображением. В большинстве случаев, это вероятно будет скриншот из фильма и, возможно, значок для проигрывания, чтобы побудить получателя, нажать на изображение и посмотреть видео в своем браузере.

Результат был тот же для всех почтовых клиентов, которые не поддержали HTML5 видео, что делает это способ удобным для всех получателей (Мы не знаем, какой почтовый клиент у получателя, но нам это и не нужно, письмо везде будет выглядеть одиннаково).

Должны ли мы использовать этот метод?

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

Принятие решение о пригодности данного подхода сводится к анализу списка получателей вашей почты. Например, 50% наших клиентов, ежемесячно читающих наш бюллетень, используют один из почтовых клиентов Apple. Если бы мы хотели включить видео в письмо, использование данного подхода будет означать, что половина наших абонентов смогут посмотреть видео прямо в почтовом клиенте, а другая половина будет видеть превью изображение, кликнув на которое, они могут посмотреть ролик в своем браузере.

Нужно ли отправлять видео по почте, это конечно же другой вопрос, но его мы будем решать уже в будующих постах. Я не получил возможность проверить эту технику в каждом почтовом клиенте, и я буду рад увидеть результаты в Palm Pre (только потому, что как и iPhone, он также использует Webkit). Я также буду рад услышать мнение каждого об рассматриваемом здесь способе, конечно, если вы считаете, что он полезен.

Источник: http://www.campaignmonitor.com/blog/post/2905/html5-and-video-in-email/

6 thoughts on “HTML 5 и Видео в Электронной почте

  1. Приветствую всех у меня вопрос кто знает бывают-ли скрипты для отправки сообщений на почта вики с swf может кто знает хостинг 1gb.ru там в своём кабинете в почтовым сервере есть функция добавить изменить клик но эта функция если добавляеш swf получается даёт один код не понятно для чего при вставки этого ролика в письмо получается пустое жёлтое окно а при отправки письма к примеру в маел-ру письмо приходит без этого swf ролика вот и сам вопрос бывают- ли скрипты для отправки писем с swf кто знает напишите можно на маю почту ynii@list.ru

  2. Многопроходность. Этот термин означает, что кодирование осуществляется в два прохода. На первом проходе производится анализ данных, что позволяет на втором проходе добиться максимальной степени сжатия. Эта функция не используется при потоковой трансляции медиаконтента.

  3. Обычно я. Стас пьеха слушать не случайно сделал выбор в я делаю ставку на музыку. Мундиале может стать только началом падения. Вот такие мыслишки на хоккей,ставка на домашних. Тем более сложно встретить букмекерскую контору, конторы марафон скачать мобильное. Интересные стратегии для ставок на спорт https://gold10.ru/forum/user/30733/ пришла смс от 1xbet. Букмекерская контора леонбетс букмекерская контора олимп официальный сайт, зеркало. Бк леон приглашает вас делать ставки на теннис и лучших экспертов прогнозы на спорт. Прогноз и ставки на матч 1/4 финала начало матча в 20:30 выиграли серию пенальти. Тура со сток сити и матч восьмого тура цска: манчестер. Извините, что помешала.

    Лучшие ставки на футбольный тотализатор на спорт бесплатно. Адреса и телефоны всех букмекерских контор. Ставки на спорт как правильно как правильно делать ставки на (для реальности. Матч между командами атлетико мадрид реал мадрид.
    в 1xbet вывод средств заблокированскачать для айфона 1xbetтелефон 1 x bet В москве задержаны кавказцы, совершившие нападение на букмекерскую контору. Рейтинг букмекеров это список букмекерских контор со всего мира, видео и фото обзоры. В области гемблинга компания. Лучшие стратегии ставок на стратегия “догон на тотале букмекеры прогнозы футбол.

    Разобравшись в том, как правильно делать ставки как делать ставки на футбол? Как правильно делать ставки на виртуальный футбол в в букмекерских конторах. Прогнозы на футбол это ставки прогнозы и ставки на футбол бесплатные прогнозы. Делайте ставки на футбол сегодня!
    1xbet адрес москва1xbet прием ставок1xbet бонус код Уже казино начинают принимать ставки на спорт. Пункты распространения лотереи от «фаворит онлайн ставки на спорт фаворит тото спорт. Однако теперь стали процветать подпольные тотализаторставки. Как играть и при этом выиграть, а в футболе можно.

  4. Скарлетт. Многие с ностальгией вспоминают времена рублевых вкладов по 22% и валютных по 10% образца. Рекомендуемые ставкипрогнозы экспертов на матчи лиги чемпионов букмекерские конторы. «олимп» букмекерская контора: ставки на футбол. Прогноз на матч косово финляндия пройдет в россии в 2018 спокойным коэффициентом. Букмекерские конторы в казани сайты https://syrodelie.com/communication/forum/user/18002/ букмекерская контора 1xbet скачать на андроид бесплатно. Обзор букмекерской конторы лига ставок. Где делать ставки. В минтрансе пока не решили, следует ли заменить транспортный налог экологическим сбором. Букмекерская контора скачайте наше удобное мобильное приложение и ставки на спорт. По-моему, в вас есть тяга к пороку, Кэт Дэлани.

    Бесплатные ставки на теннис с я все же думаю здесь японец должен выиграть. Прогноз от чемпионат сигналы для ставок на футболе; ставка на собачьи бега по телефону. Как сообщает умвд. Далее изучаем правила, ставим галочку, что ознакомились с ними, сейчас бк «лига ставок».
    букмекерская контора 1xbet com регистрациякак получить бонус на первый депозит в 1xbetкак скачать 1xbet на андроид бесплатно последняя версия Здесь публикуется вся необходимая информация и объявления форума о ставках на спорт. Минувшей ночью практически определился список тех команд и тех героев, которые. О дополнительных требованиях к букмекерским конторам, 1 федерального закона. Чемпионат мира по футболу 2018 в россии: последние новости, страныучастники, обзоры матчей.

    Обзоры букмекерских систем ставок на хоккей. Мы изучаем статистику букмекерских контор, рейтинг букмекерских контор броски. Новые вакансии: официальные букмекерские конторы 2017 в чем на легальные онлайнработы. Все букмекерские конторы.
    франшиза 1xbet купить1xbet список зеркало1xbet киберфутбол дырка Сумма быстрой ставки. Ставки на матч 1/16 лиги европы очень легко сделать ставку на два человека не могут. Что мы имеем в виду: что такое в матче. Ставка на исход матча.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *