Как встроить видео HTML5 в электронное письмо

HTML5 — новейший язык разметки для представления и структурирования контента в интернете. HTML расшифровывается как язык гипертекстовой разметки (Hyper Text Markup Language). Это стандартный язык, используемый для создания веб-документов. HTML обновляется по мере развития потребностей пользователей. Например, HTML5 — последнее обновление HTML. Он позволяет кодировать видео в веб-документах. HTML5 вводит элемент, позволяющий воспроизводить видео в Интернете, заменяя элемент.

Возможность работы с видео, предоставляемая HTML5, важна, поскольку видеоконтент является центральной частью маркетинга, рекламы и построения бренда. Это свидетельствует о том, что такие видеоплатформы, как YouTube и TikTok, продолжают пользоваться огромным успехом. В настоящее время все социальные сети уже поддерживают видео.

Тем не менее, было бы разумно включить видео в электронное письмо. Email-маркетологи также должны иметь возможность воспользоваться преимуществами видеомаркетинга. Однако некоторые почтовые клиенты поддерживают HTML5, а другие — нет. Хотя это затрудняет интеграцию видео в электронные письма, есть несколько способов это сделать. Узнайте, как встраивать HTML5-видео в электронные письма и использовать другие альтернативы.

Каковы преимущества видео в электронной почте?

Видеоконтент становится все более важным для увеличения эффективность кампаний email-маркетингаОпрос Wyzowl показал, что  92% маркетологов Признают видео неотъемлемой частью своей деятельности. Причина проста: интегрируя видео в email-маркетинг, маркетологи одновременно получают преимущества и видео, и email-маркетинга.

Вот некоторые преимущества, которые получают маркетологи от использования видео в электронных письмах:

• Повышение вовлеченности клиентов: Когда вы отправляете электронное письмо, читатель может бегло просмотреть текст и попытаться выделить наиболее важные моменты. Но видео останавливает его. Скорее всего, он потратит больше времени на просмотр.

Допустим, вы проводите кампанию, объясняющую назначение продукта. Описание услуги, как правило, многословное и информативное. Но когда та же информация представлена ​​в виде видео, она становится более увлекательной. Читатель может бегло просмотреть текст, но посмотрит видео целиком. Таким образом, видео увеличивает время, которое подписчик проводит в вашем письме.

• Высокая узнаваемость бренда: Видеоролики повышают узнаваемость вашего бренда. Это снижает показатель отказов и увеличивает CTR, а также коэффициент конверсии. Видеоролики в электронных письмах могут помочь в этом, поскольку брендам легко объяснить и показать, что они имеют в виду.

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

• Формирование доверия к бренду: Составляя электронное письмо только с текстом, вы можете попытаться передать тон бренда, но это не сравнится с возможностями видео. Получатели видео видят лица и характеры брендов, которые они покупают. Это, в свою очередь, способствует установлению ещё более личных отношений с вашими клиентами.

Эффективная кампания может показать сотрудников на работе или сотрудников давая свои отзывы о своём опыте работы. Такие образы вызывают у клиентов ещё большую симпатию, и у них развивается эмоциональная связь с вашим брендом. Они чувствуют, что знают бренд и чувствуют с ним связь. Следовательно, в какой-то степени они ощущают себя владельцами бренда.

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

1. Доверие и искренность: Демонстрируя работу сотрудников и их искренние отзывы, вы создаёте ощущение прозрачности и искренности. Клиенты ценят видеть настоящих людей, увлечённых своей работой, поскольку это укрепляет доверие и авторитет вашего бренда. Это доверие крайне важно для построения долгосрочных отношений с клиентами.
2. Очеловечивание бренда: выделение сотрудников в вашей кампании очеловечивает ваш бренд. Это добавляет индивидуальности названию и позволяет клиентам увидеть людей, стоящих за продуктами или услугами. Этот человеческий фактор помогает клиентам установить личный контакт с вашим брендом, укрепляя эмоциональную связь.
3. Поддержка со стороны сотрудников: когда сотрудники участвуют в кампании и делятся своим опытом работы, они сами становятся адвокатами бренда. Их энтузиазм и положительные отзывы могут вдохновлять клиентов и вызывать чувство гордости и лояльности у сотрудников. Это может привести к повышению вовлеченности и мотивации сотрудников, что в конечном итоге положительно скажется на качестве обслуживания клиентов.
4. Возможности сторителлинга: включение историй и опыта сотрудников в вашу кампанию открывает широкие возможности для сторителлинга. Рассказы об их жизненном пути, трудностях и достижениях могут увлечь вашу аудиторию и создать историю вокруг вашего бренда. Такая история помогает клиентам понять ценности и миссию вашего бренда, укрепляя их эмоциональную связь.
5. Повышение запоминаемости бренда: когда клиенты видят сотрудников, представленных в вашей кампании, это производит на них неизгладимое впечатление. Люди склонны запоминать истории и лица лучше, чем стандартную рекламу. Ассоциируя ваш бренд с людьми, которые его представляют, вы повышаете вероятность того, что клиенты вспомнят ваш бренд при принятии решения о покупке.
6. Социальное доказательство: Учет отзывов и опыта сотрудников является одной из форм социального доказательства. Когда потенциальные клиенты видят, что сотрудники положительно отзываются о вашем бренде, они с большей вероятностью доверяют вам и выбирают ваши продукты или услуги. Это повышает доверие и укрепляет уверенность в том, что с вашим брендом стоит взаимодействовать.

Рассмотрите возможность включения различных точек зрения и демонстрации различных организационных ролей, чтобы максимально усилить воздействие изображения сотрудников в вашей кампании. Такая инклюзивность может найти отклик у более широкой аудитории и продемонстрировать вашу приверженность разнообразию и равенству. Не забывайте согласовывать изображение сотрудников с ценностями вашего бренда и убедитесь, что их опыт отражает положительные аспекты работы с вашей компанией.

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

Форматы видео, поддерживаемые в электронной почте

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

Дело в том, что конвертировать видео в разные форматы и затем прикреплять их в соответствии с требованиями этих почтовых клиентов может быть утомительно. Именно поэтому стоит выбрать встраивание видео HTML5 в электронные письма. Встраивание видео HTML5 в электронное письмо упрощает совместимость с устройствами, браузерами и платформами. Кроме того, вы позволяете делиться контентом и настраивать его. Дополните это качественным хостингом для SEO, и вы обеспечите подписчикам вашей электронной почты наилучший пользовательский опыт.

Ниже приведен список, показывающий, где работают видео HTML5 и где отображается резервный визуальный эффект.

Хотя почтовые клиенты, такие как Gmail, не поддерживают HTML5-видео, большинство пользователей электронной почты всё ещё используют его. Поэтому важно знать, как встроить резервное изображение.

Обзор HTML5-видео в электронном письме

Но зачем вам встраивать HTML5-видео в свою электронную почту — один из важнейших каналов маркетинга в сфере розничной торговли, B2C и SaaS, если вы можете добавить его в виде вложения или гиперссылки?

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

Во-вторых, когда видео сопровождается гиперссылкой с помощью анкорного текста, у читателя не возникает стимула кликнуть по ссылке и перейти на другой сайт для просмотра видео. Он прочитает анкорный текст и не нажмёт на ссылку. Некоторые могут даже отложить просмотр видео после прочтения текста. Они могут отвлечься и не вернуться к просмотру.

Встраивание HTML5-видео — отличный вариант, поскольку оно упрощает просмотр для получателя письма. Читателю не нужно никуда нажимать. Видео воспроизводится, пока письмо открыто. Если оно интересно, подписчик с большей вероятностью досмотрит его до конца. Вы можете использовать StackOverflow для встраивания HTML5-видео в свои письма. Но чтобы дать вам представление, вот обзор того, что нужно сделать:

Как встроить видео HTML5 в электронное письмо

Встроить видео с помощью HTML5 можно разными способами. С помощью этих методов можно задать резервное изображение и его параметры.

Использование элемента Object

The Элемент — один из способов встроить видео в электронное письмо. Он используется для встраивания различных типов медиа в HTML-документы. элемент встраивает элементы управления ActiveX.

Элементы управления ActiveX — это небольшие программы, используемые в Интернете для улучшения взаимодействия с пользователем. При взаимодействии с элементом объекта вы задействуете технологии внедрения ActiveX через Интернет. После Далее перечислены характеристики медиаконтента, которые вы планируете встроить в свой документ HTML5. Это могут быть изображения, аудио, PDF-файлы, Flash-анимация и, в данном случае, видеофайлы.

Вы можете использовать этот код для вставки видео с помощью

<object data="video.mp4"></object>

Однако, используя Не всегда пользуется широкой поддержкой. Его эффективность зависит от внедряемого объекта.

Использование элемента «Видео»

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

Вы можете использовать следующий код для встраивания вашего видео с помощью элемент.

<!--[if !mso]--><!-->
<a href="Link to the video" target="_blank" style="mso-hide:all;display:block;width:inherit;height:inherit;max-height:inherit;">
    <img src="GIF URL" border="0" alt=" " style="mso-hide:all;display:block;width:inherit;height:inherit;max-height:inherit;" />
</a>
<!--<![endif]-->

<video autoplay="autoplay" loop="loop" clipID="em_4566" poster="GIF POSTER" controls="controls" src="VIDEO_MP4" style="mso-hide:all;display:block;width:100%;height:auto;max-height:none;"></video>

<!--[if !mso]--><!-->
<a href="Link to the video" target="_blank" style="mso-hide:all;display:block;width:inherit;height:inherit;max-height:inherit;">
    <img src="GIF URL" border="0" alt=" " style="mso-hide:all;display:block;width:inherit;height:inherit;max-height:inherit;" />
</a>
<!--<![endif]-->

<div class="vid_em_4566" style="mso-hide:all;width:0px;max-height:0px;height:0px;overflow:hidden;text-align:center;">
    <video autoplay="autoplay" loop="loop" clipID="em_4566" poster="GIF POSTER" controls="controls" src="VIDEO_MP4" style="mso-hide:all;display:block;width:100%;height:auto;max-height:none;"></video>

    <!--[if !mso]--><!-->
    <a href="Link to the video" target="_blank" style="mso-hide:all;display:block;width:inherit;height:inherit;max-height:inherit;">
        <img src="GIF URL" border="0" alt=" " style="mso-hide:all;display:block;width:inherit;height:inherit;max-height:inherit;" />
    </a>
    <!--<![endif]-->
</div>

Источник

Код состоит из четырёх частей. Первая часть кода задаёт параметры медиафайлов в электронном письме, будь то видео или резервный контент. Вторая часть устанавливает привязку изображения, которую почтовые клиенты будут запрашивать для отображения. Третья часть скрывает медиафайлы, если почтовые клиенты не поддерживают этот формат, для обеспечения бесперебойной работы пользователя. Четвёртая часть устанавливает автоматическое воспроизведение видео при открытии письма.

Альтернативы видео HTML5 в электронной почте

Даже если, как я уже говорил, наилучшим вариантом для видео в электронных письмах является его встраивание с помощью HTML5, HTML5 работает не во всех почтовых клиентах и ​​браузерах. Это создает трудности для маркетологов, которые хотят использовать видеомаркетинг в своих кампаниях. Им потребуется сложное кодирование, чтобы учесть все переменные и добавить резервный визуальный элемент. Но есть и другие альтернативы, которые можно использовать для встраивания настоящего видео в электронное письмо. Эти альтернативы добавляют один клик для перехода к видеоплееру или видеохостингу. Они привлекают внимание читателя и более эффективны, чем прикрепление видео или гиперссылка на него. Вот краткое описание:

Добавить фальшивую кнопку воспроизведения на изображение

Не пугайтесь слова «подделка». Кнопка «подделка» не предназначена для обмана. Она скорее указывает на наличие видео в письме.

Подумайте об этом. Если читатели не увидят кнопку воспроизведения, они могут решить, что это просто изображение. Нельзя пускать кликабельность ваших писем на самотёк.

Источник

Взгляните на пример выше. Кнопка воспроизведения привлекает внимание читателей, побуждая их нажать её. При нажатии кнопки воспроизведения автоматически открывается видео, поскольку изображение сопровождается гиперссылкой. Видео можно разместить на YouTube, Vimeo или на вашем сайте. Чтобы создать изображение с фальшивой кнопкой воспроизведения, можно сделать скриншот видео в плеере или заказать у графического дизайнера создание миниатюры видео с кнопкой воспроизведения.

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

Используйте GIF-файлы

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

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

Источник

Вы можете создать GIF-анимацию с помощью различных онлайн-инструментов, таких как Giphy.com или EZGif. Кроме того, чтобы раскрыть весь потенциал GIF-анимации, можно добавить кнопку воспроизведения поверх изображения.

Но это лишь одно из преимуществ GIF-файлов. При встраивании GIF-файла вам не потребуется HTML-кодирование. Это настоящее спасение для маркетологов, которые сами не являются программистами. В конце концов, будучи маркетологом, вы можете воспользоваться возможностями видеорассылки по электронной почте, не тратя время на изучение программирования.

Тем не менее, вам следует учитывать размер GIF-файла, который вы добавляете в письмо. Загрузка тяжёлых GIF-файлов может занять много времени, что может привести к нежелательным результатам. Кроме того, они могут расходовать трафик вашего тарифного плана. Поэтому убедитесь, что размер GIF-файла достаточен, как можно ближе к 1 МБ.

Используйте анимированную кнопку воспроизведения

Анимированная кнопка воспроизведения — это шаг вперёд по сравнению с фальшивой кнопкой воспроизведения. Анимированную кнопку воспроизведения можно создать множеством креативных способов. Вы можете сделать её плавно появляющейся и исчезающей, перемещать по экрану и сделать яркой. Как бы вы ни предпочитали, сделайте её скромной, чтобы она не раздражала ваших читателей. Ниже представлен пример простой анимированной кнопки воспроизведения.

Источник

Вы также можете использовать анимированную кнопку воспроизведения отдельно или наложить на неё статическое изображение или миниатюру. Если вы решите использовать только анимированную кнопку воспроизведения, обязательно опишите видео в своём письме, чтобы подписчики понимали, что именно они хотят посмотреть. Разместив кнопку воспроизведения, пользователь будет знать, что есть видео. Однако, если он не знает, о чём видео, он может вообще проигнорировать кнопку.

Лучше сочетать анимированную кнопку воспроизведения с миниатюрой. Миниатюра придаёт определённый контекст видео, которое подписчик собирается посмотреть. Однако следует убедиться, что визуальное оформление этих двух элементов привлекательно. Они не должны выглядеть хаотично, иначе отпугнут читателя. Также возможно сочетание анимированной кнопки воспроизведения и GIF-анимации. Два движущихся изображения скорее запутают читателя, чем привлекут его.

Вам нужно правильно встроить видео, но это не должно быть единственным, чем вы занимаетесь как маркетолог. Помните, ваша задача также заключается в том, чтобы подогреть интерес читателей к видео. Ведь ваша главная цель — добиться того, чтобы читатели кликнули по ссылке и посмотрели. Поэтому не просто обеспечьте воспроизведение видео. Вы также должны сделать всё возможное, чтобы заслужить клик. Иначе вся кампания видеомаркетинга развалится.

В заключение

При проведении email-маркетинговой кампании необходимо использовать все доступные советы и рекомендации, чтобы повысить её эффективность. Видео-маркетинговая кампания — один из способов повысить её эффективность. Однако встроить видео в электронное письмо непросто.

Лучший вариант — встроить видео, которое воспроизводится в письме, не перенаправляя читателя на новый веб-сайт. К сожалению, разные почтовые клиенты поддерживают разные форматы видео. Кроме того, не все почтовые клиенты поддерживают видео в формате HTML5.

Используя HTML5, вы можете встроить видео, которое будет без проблем просматриваться в некоторых почтовых клиентах, а также настроить резервное изображение, которое будет отображаться в случае, если видео не воспроизводится. Это избавит читателя от просмотра повреждённого изображения или чёрного экрана.

Однако есть и другие способы интегрировать видео в электронное письмо без использования HTML5. Можно использовать поддельную кнопку воспроизведения, анимированный GIF-файл с кнопкой воспроизведения или анимированную кнопку воспроизведения. Всё это позволяет найти оптимальный вариант, который устроит вас и вашего подписчика.