假视频：电子邮件中视频的后备

已发表: 2019-03-15

绝对不可否认视频营销的力量。 视频内容能够比静态图像更快地讲述故事。 它更情绪化。 它可以让您在几秒钟内就可以用文字描述的段落进行交流。 因此，毫不奇怪，许多电子邮件营销人员都对在他们的电子邮件中包含视频感兴趣——结果却发现大多数电子邮件客户端不提供对视频的支持。

但是，虽然大多数客户端不支持真实视频，但这并不意味着您必须告别在广告系列中添加类似视频的互动的想法。 输入：假视频o ！

人造视频通过交互模仿视频般的运动，让您的订阅者感觉他们正在收件箱中播放视频。 有许多人造视频技术。 最受欢迎的一个是由#emailgeek Kristian Robinson 创建的，他展示了他在 2018 年伦敦 Litmus Live 上使用 CSS 动画滚动浏览单个视频帧的精灵表的方法。你应该在下面查看他的演讲或收听电子邮件设计播客 #71 ，我们在其中介绍了 Kristian 的技术。

在这篇文章中，我们将向您介绍我们在 Litmus 使用的技术。 它建立在动画 GIF 之上，并有一大优势：它也适用于 Gmail！

人造视频示例

为什么要使用假视频？

尽管电子邮件中的视频是一个热门话题，但它仅适用于 Apple Mail 和 iOS Mail——唯一完全支持 HTML5 视频的电子邮件客户端。 通过使用人造视频技术，您可以在更多电子邮件客户端的支持下模仿电子邮件中的真实视频。

人造视频技术得到以下支持：

  • Gmail
  • Gmail 应用程序
  • 苹果邮箱
  • 适用于 iPhone 和 iPad 的 iOS 邮件
  • 三星邮箱
  • Mac 版 Outlook

这占支持该技术的电子邮件客户端整体市场份额的64% 以上。 因此，如果您想在您的广告系列中添加一些类似视频的运动，使用人造视频技术意味着您的视频内容可以被更多订阅者看到，而不是您在使用 HTML5 视频时所能达到的。

如何创建假视频：使用分层图像模仿实时视频

要在您的下一个电子邮件活动中使用这种人造视频技术，您将需要两张大小相同的图像：静态封面和动画 GIF，相互叠加。

  1. 静态封面图
    在这个例子中，我们的静态封面图片被命名为cover-play.jpg 。 这是默认显示的图像，但当您的订阅者与您的电子邮件交互时，它会消失并显示下方的背景 GIF。 我们的示例在静态封面图像中有一个播放按钮图标来模仿视频，但您不一定需要包含一个 - 如果您愿意，您可以合并任何类型的图形或文本，但不要忘记您的ALT 文字！

    如何制作假视频
  2. 动画 GIF 背景图片
    然后，您将需要动画 GIF 背景图像——我们的名为fauxvideo.gif 。 这是当订阅者将鼠标悬停在静态封面图像上时将显示的图像。 这将作为普通背景图像放入代码中。

    动画 GIF 背景图像。

设置 CSS/HTML

让我们看看如何使用 HTML 和 CSS 为您的下一个电子邮件活动设置假视频：

嵌入式 CSS

此代码位于电子邮件顶部的<head></head>标记之间。

 .showvideo:hover{ opacity: 0 !important; transition: 0.3s !important; } .showvideo { transition: 0.3s !important; }

此代码中的:hover样式将封面图像更改为opacity: 0 —有效隐藏图像 — 当订阅者将鼠标悬停在该部分上时，在背景中显示动画 GIF。 0.3 秒的过渡是装饰性的添加，在支持它的电子邮件客户端中为悬停添加了逐渐淡入淡出的效果。 它被添加到悬停和非悬停类中，以确保当订阅者将鼠标悬停在图像上并关闭鼠标时平滑过渡。 （注意：您不需要为 Outlook 设置 VML 回退，因为 Outlook 不支持悬停。）

HTML

您需要在 HTML 中包含两部分代码，一个<td>单元格和一个<img>单元格。

这是包含<td>单元格的代码，它加载动画 GIF 作为背景图像，即使封面图像位于顶部并且交互未激活。

 <td class="w100p" background=" http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif " bgcolor="#43a1e2" valign="top">

这是隐藏在:hover上的cover-play.jpg图像的代码。 如您所见， <head> 中的 CSS已激活“ showvideo ”类。

 <img class="showvideo" src="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/cover-play.jpg" width="600" border="0" alt="Play" />

现在，把它们放在一起！ 您可以在此CodePen 中查看完整的示例人造视频代码。

关于假视频的常见问题

人造视频移动响应吗？

绝对地！ 虽然动画 GIF 将在桌面悬停时触发，但需要点击或长按才能在移动设备上显示 GIF。 但是，如果在您的电子邮件中应用了点击，该链接将启动浏览器，订阅者将永远不会看到该视频。 如果没有点击，GIF 将按预期播放。 长按将显示 GIF，无论是否点击。
人造视频移动响应吗？

你能用这种技术使用视网膜图像吗？

是的！ 出于本示例的目的，我们没有使用 Retina 图像，但如果对您的整体电子邮件加载时间有意义，您当然可以使用带有人造视频的 Retina 图像。 小心使用过大的图像或 GIF，这会对电子邮件的加载时间产生负面影响。 请务必查看我们关于视网膜图像的帖子。

为什么使用不透明度而不是其他隐藏方法？

在悬停的元素上使用display:none会将其从文档流中删除，您最终会得到图像不断消失并在悬停时重新出现的效果，这不会显示动画 GIF 也不会提供平滑的过渡：
使用不透明度代替其他隐藏方法
使用可见性：隐藏会产生类似的闪烁效果：
使用可见性：隐藏
使用 opacity 方法隐藏封面图像提供了最流畅的体验，但它也有其缺点。 以下电子邮件客户端不支持不透明度：

  • 美国在线
  • 雅虎
  • 展望网

将虚假视频添加到您的下一个电子邮件活动中

我们迫不及待地想看到更多的假视频。 因此，如果您在即将收到的电子邮件中使用人造视频技术，我们很乐意看到它！ 请随时在下面的评论中分享您的设计的链接。

如果您有任何问题，请让我们听到！