视频模块

在收件箱中显示一张静态预览图,点击后打开该文件;在托管的实时预览页面上,则渲染为一个真正可用的 <video> 播放器。没有任何电子邮件客户端能够执行媒体播放,因此这是唯一一个邮件层级与实时预览层级真正采用不同渲染方式的模块,而不是同一份标记的动态/降级拆分。

工作原理

没有任何电子邮件客户端——无论是 Gmail、Outlook,还是介于两者之间的任何客户端——能够内嵌播放视频。因此这里根本不存在投票或手风琴模块那样的动态层级。

已发送的 HTML 始终渲染一张静态预览图。如果你设置了封面图,它会以一张普通的全宽 <img> 显示,并包裹在一个直接指向视频文件(或你指定的页面)的链接中。如果封面留空,则会改为渲染一个占位框:一个带 ▶ 图标的纯色深色矩形,配上说明文字——即描述文本,以及格式化为 M:SS 的时长(如果你设置了时长)。这样一来,即使没有提供图片,该模块依然能传达出自己的内容。点击这两种版本都会直接打开 src,这与带链接的图片模块已经使用的点击跳转模式相同,点击行为会被记录在模块级的点击热力图中。

托管的实时预览是一个真人正在主动查看的真实页面,而不是受限于电子邮件客户端渲染能力的收件箱。因此在那里,同一个模块会改为渲染一个真正的 <video controls> 元素:如果你提供了封面图,它会被设为 poster 属性;描述文字则会作为它的 aria-label。这种拆分依据的信号,与代码库中每一个按后端分支渲染的发射器所使用的信号相同:渲染时是否存在基础 URL(有则为邮件,无则为实时预览)。并不存在一个需要单独配置的"实时预览视频"模块——只有一个模块,它的两个层级在能做什么这件事上确实存在差异。

该模块的 src 字段接收一个普通 URL——视频文件由你自己托管,MailInApp 不存储视频文件。封面图则不同:它来自媒体库,因此检查器显示的是一个缩略图和一个**选择图片…**按钮,而不是 URL 输入框——你可以在这里直接选择已上传的图片,或上传一张新图片。如果 src 为空,该模块在两个层级都不会渲染任何内容。

可配置字段:

视频 URL——邮件预览所链接到的文件(或页面),同时也是实时预览播放器的 src。
封面图——作为邮件预览图显示,并设为实时预览中 <video> 的 poster;从你的媒体库中选取。
描述——用作占位框的说明文字(未设置封面时),以及实时预览播放器的 aria-label。
时长(秒)——会以 M:SS 的格式显示在占位框的说明文字中;设为 0 则不显示。
宽度(%)——10 到 100。
画框的背景色、内边距、边框与圆角半径。

视频是纯内容:没有需要回答的内容,因此完成情况和观看时长都不会被追踪——只有点击跳转本身会出现在点击热力图中,与其他任何带链接的模块一样。

示例

Subject

Watch: our product launch recap

一封新品发布邮件可以内嵌一段 30 秒的预告片。收件人在收件箱中点击封面图,即可在你的网站或 CDN 上打开完整视频;而打开该营销活动托管实时预览的收件人,则可以直接在页面内观看,无需离开页面。一份课程回顾摘要邮件可以用同样的方式链接每节课的录像,时长字段能让收件人在点击之前就大致了解需要投入的时间。一段客户见证视频可以放在案例研究邮件中,用视频中的一帧静止画面作为封面,这样预览看起来就像一张真实照片,而不是一个通用的占位框。

静态回退效果是什么样子

<a href="https://cdn.example.com/launch-teaser.mp4"
   style="display:block">
  <div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
    <img src="https://cdn.example.com/launch-teaser-poster.jpg" alt="Launch teaser"
         style="display:block;width:100%;max-width:100%" />
  </div>
</a>

这就是邮件层级:一张封面图包裹在一个指向视频文件的普通链接中——实时预览中真正的 <video controls> 元素只会在托管页面上渲染,绝不会出现在邮件里。

视频模块

工作原理

示例

静态回退效果是什么样子

相关内容