假視頻：電子郵件中視頻的後備

已發表: 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 方法隱藏封面圖像提供了最流暢的體驗，但它也有其缺點。 以下電子郵件客戶端不支持不透明度：

  • 美國在線
  • 雅虎
  • 展望網

將虛假視頻添加到您的下一個電子郵件活動中

我們迫不及待地想看到更多的假視頻。 因此，如果您在即將收到的電子郵件中使用人造視頻技術，我們很樂意看到它！ 請隨時在下面的評論中分享您的設計的鏈接。

如果您有任何問題，請讓我們聽到！