在爭吵跨瀏覽器支持的同時，用透明度覆蓋視頻

隨著網站在設計方面變得越來越動態，有時需要結合複雜的動畫元素。從CSS過渡到畫布上的3D渲染以及動畫SVG，有很多方法可以做到這一點。但是通常更容易使用

但是，如果您需要該視頻上的透明背景，以便它可以覆蓋並似乎與頁面上的其他內容交互怎麼辦？有可能，但可能很棘手，尤其是跨瀏覽器。讓我們探索這一點。

這是一個例子

要了解透明視頻疊加的工作方式，我準備了一個示例，希望我既有趣又相關。這個想法是將視頻與下面的交互式內容集成在一起，以使視頻背後的內容隨著滑塊的前進而發生變化。這是一個滑塊廣告狗食，帶有覆蓋層上狗的真實視頻，我敢肯定，現實，可愛的狗會提高轉化率！

您可以按照本文進行關注以自己重新創建此演示。創建這樣的視頻所需的部分是“圖像序列”（一堆alpha-transparent圖像，我們會將其拼接在一起的視頻）。我正在提供用於示例的圖像。

下載圖像

探索可能性

為了實現這種效果，我首先搜索一種紐約解決方案，該解決方案可以使我可以在頁面上插入具有透明背景的動畫內容。

GIF

出現的第一件事是GIF。即使GIF格式是在30年前引入的，但仍被廣泛使用。不幸的是，它有其局限性。儘管它適用於簡單和小型的動畫圖形，但它對於色彩鮮豔，長時間的視頻鏡頭並不是很棒，它的顏色空間有限，並且在復雜的視頻中的尺寸很大。

apng

我研究的下一個選擇是APNG ，由於某種原因，它不像GIF那樣受歡迎，但要好得多。 （我什至不知道它存在，對嗎？）APNG在支持24位圖像和8位透明度的同時，APNG與動畫GIF文件相似。它也與常規PNG向後兼容。如果不支持APNG，則將顯示第一幀。它得到了受歡迎的瀏覽器的支持，但是Internet Explorer 11中沒有支持（是的，有些人仍然必須支持）。雖然暫時走了一會兒，但我對它的文件大小和性能並不滿意。

有趣的事實： Apple在iOS 10 Imessage應用程序中採用了APNG格式作為動畫貼紙的首選格式。

通過PNG循環

接下來，我想到了一個粗略的，但有效的想法是：使用一堆PNG ，並與JavaScript一起循環循環以模仿視頻。但是，它需要使用大量數據傳輸（每個視頻框架都是一個單獨的圖像）和資源來動畫（您可以快速排出用戶的電池或使他們的計算機風扇發瘋）。

我很快放棄了這個想法，但事實證明這很有用。我將在文章結尾回到這一點。

Webm具有alpha透明度

隨著的所有格式在這裡失敗，我開始研究視頻。我發現了一篇有關Chrome視頻中Alpha透明度的文章，該視頻於2013年發布，該視頻宣布了使用Alpha頻道對WebM的Google Chrome支持。它甚至顯示了一個示例，並分享瞭如何使用它的提示。我瀏覽了這篇文章，這立即感覺像是要走的路。在將圖像序列轉換為WebM之後，我更加相信，因為GIF的權重為5.8 MB，但使用相同的幀速率和全顏色的WebM具有透明度，只有540 KB！這是小的10倍以上，同時提供更好的性能和質量。驚人的！

不過，歡樂並沒有持續很長時間。一旦我在iOS手機上打開網站時，我就意識到我應該從檢查瀏覽器兼容性開始。不幸的是，Safari（IOS和MACOS）不支持WebM中的透明度。當我的視頻在Chrome，Firefox和Edge上完美運行時，Safari用醜陋的黑色背景向我致意。

搜索繼續...

一個很好的解決方案

值得慶幸的是，我從WWDC 2019中找到了一個視頻，宣布HEVC視頻，並在iOS 13和Macos Catalina開始，並支持Alpha支持Safari。它似乎提供了與WebM相同的功能，但在Apple設備上提供了支持。因此，我決定使用混合解決方案：Safari和WebM的HEVC用於其他瀏覽器。

似乎是完美的解決方案。但是現在我們有兩個任務：

1. 用α-透明度創建HEVC
2. 檢測Safari（和版本）以服務正確的格式

創建透明視頻

我們將從簡單的部分開始：創建WebM文件。如果要創建，轉換甚至編輯視頻文件，則FFMPEG是您的朋友。這是一個非常強大的開源多媒體框架，如果您與多媒體文件有任何關係，我建議從那裡開始，因為它有很多事情。我可以說FFMPEG幫助我將視頻文件尺寸減少了10次，而沒有任何可見的圖像質量降解。但是，讓我們回到透明度。

根據我的經驗，如果您需要將動畫元素包含在網站佈局中，則將它們作為PNG中的一組視頻幀。即使在我的示例項目上工作時，從視頻中刪除背景的工具也為我生成了一組圖像。因此，假設我們正在從一組圖像中構建視頻（請記住，您可以下載我們的集合），但是即使您有一個視頻文件，該過程看起來也相似（根據您的需求調整FFMPEG選項）。

我們現在準備創建視頻。使用命令行，我們將導航到包含PNG文件的文件夾並運行以下命令：

 ffmpeg -framerate 25 -i unscreen- =。 png -c：v libvpx -vp9 -pix_fmt yuva420p output.webm

您可以調整參數以滿足您的需求：

• Framerate：輸出視頻中的1張將使用多少圖像
• -i開放 - =。 png：輸入文件名和格式。我的文件有001到150的數字，因此我用作掩碼，以選擇名稱中的三位數字的所有文件。
• -c：v：指定要使用的編解碼器。我希望該視頻由VP9編碼，該視頻得到大多數Web瀏覽器的支持。
• -pix_fmt：指定要使用的像素格式。在我們的CAS中，它應該支持Alpha頻道。如果運行FFMPEG -PIX_FMTS，則可以看到所有支持的格式。
• output.webm：提供所需的輸出文件名作為最後一個參數

還有更多可用的選項，但是我不會深入研究細節，因為可能需要多個文章來瀏覽它們。示例中提供的命令中提供的那些適合我們的用例。

過程完成後，我們應該看到一個新的output.webm文件，如果您在受支持的瀏覽器中打開它，您將看到一個視頻。容易，對吧？

創建HEVC alpha

由於我們已經準備好WebP文件，因此該轉到我們將使用的第二種格式：具有alpha透明度的HEVC 。不幸的是，在撰寫本文時，FFMPEG不支持HEVC，因此我們必須使用其他工具。據我所知，使用Alpha創建HEVC的唯一方法是在Mac上使用Finder或Compressor。如果您有PC，則可能必須要求Mac的人為您做。 Compressor應用僅提供最終剪切Pro，因此我不會使用它，儘管值得考慮是否需要自定義設置。

自Macos Catalina以來，Finder具有內置的編碼媒體工具來轉換視頻。它很簡單（免費），因此可以滿足我們的需求。

Finder期望視頻文件作為輸入，因此，首先，我們必須將圖像序列轉換為PRORES 4444。這是一個重要的步驟，因為編碼媒體工具不接受任何視頻，除非您提供其接受的格式，否則它將失敗。它給了我一個或兩個頭痛，直到我找到了輸入文件的正確編碼。

我們可以使用FFMPEG創建輸入視頻。就像創建WebM時所做的那樣，我們只需要以適當的參數運行FFMPEG：

 ffmpeg -framerate 25 -i unscreen- =。 png -c：v prores_ks -pix_fmt yuva444444p10le -alpha_bits 16 -profile：v 4444 -f mov -vframes -vframes -vframes 150 output.mov.mov

從這一點上開始，需要一個Mac。但是該過程很簡單，並且不涉及在終端中鍵入任何內容，因此，即使您要求與Mac的非技術朋友為您做到這一點，我敢肯定他們可以管理。

準備好prores4444視頻，您可以導航到Finder中的包含文件夾，右鍵單擊它，在上下文菜單中，選擇“編碼選定的視頻文件” 。

將出現一個窗口。選擇所需的HEVC質量（有兩種可供選擇），然後檢查保留透明度的選項。然後單擊“繼續”按鈕。

片刻之後，您應該看到一個新文件，該文件已用Alpha在HEVC中編碼。完成了！在Safari中打開此文件確認透明度有效。

最後但並非最不重要的一點是，是時候在網站上使用視頻了！

為所有瀏覽器提供透明視頻

我們可以使用

還有一件事要照顧：一些瀏覽器支持WebM或HEVC本身，但沒有透明度。這些瀏覽器將播放視頻，但具有黑色背景而不是Alpha頻道。例如，Safari 12將在沒有透明度的情況下進行HEVC。這對我們來說是不可接受的。

通常，我會使用元素將視頻以及多種格式作為後備提供，瀏覽器會選擇它支持的視頻。但是，由於我們只想在特定的Safari版本上顯示HEVC，因此我們必須使用JavaScript設置視頻SRC屬性。

iOS 13和Mac Safari 13支持HEVC具有透明度，因此讓我們從檢測到這些開始。根據支持的支持，建議調整網站功能的推薦方法是檢測API的存在而不是查看用戶代理，但是我沒有找到任何簡單的方法來檢測瀏覽器是否支持視頻格式的透明度。相反，我提出了自己的解決方案。這不是很漂亮，但是可以完成工作。

函數支持shevcalpha（）{
  const navigator = window.navigator;
  const ua = navigator.useragent.tolowercase（）
  const hasmediacapabilities = !!（navigator.mediacapabilities && navigator.mediacapabilities.decodinginfo）
  const issafari =（（ua.indexof（'safari'）！= -1）&&（！
  返回issafari && hasmediacapabilities
}

這是通過查看Navigator.Mediacapabilities（在較舊版本中不支持的MediaCapbilities）來針對Safari 13及以上的目標，並且看著瀏覽器完全是Safari。如果功能返回，那麼我很高興與HEVC Alpha一起使用。對於任何其他情況，我將加載WebM視頻。

這是HTML中如何融合在一起的一個示例：

  

<script>
const player = document.getElementById（&#39;player&#39;）;
player.src = supportshevcalpha（）？ &#39;output.mov&#39;：&#39;output.webm&#39;;
</script>

如果您對視頻元素上的那些循環自動播放playsInline論點感到好奇，那就是複制類似GIF的體驗：

• 沒有靜音，如果沒有用戶互動，視頻將無法播放。
• 使用PlaySinline，在iOS上，該視頻播放在佈局中的位置，而不是在全屏上打開。
• 隨著循環，視頻一遍又一遍地重複。
• 使用AutoPlay，它將開始在頁面加載上自動播放視頻（只要我們也已靜音）。

就是這樣！我們為透明視頻提供了輕巧，性能和高質量的解決方案，可用於大多數現代瀏覽器（至少是Chrome，Firefox，Safari和Edge的最後兩個最新版本）。我們可以添加一些基本的HTML和CSS，以將靜態內容整合在一起，並使其更真實，或者僅使用我的演示中的相同想法。那還不錯，是嗎？

嘿，但是IE 11呢？我的整個公司都在使用它！

通常，我建議將這樣的功能限制在現代瀏覽器中，並將視頻隱藏在IE中。該視頻可能不是網站的關鍵要素。雖然，我曾經在一個商業項目上工作，IE 11支持是必須的，我被迫找出一些東西以顯示那裡的透明視頻。最後，我最終用JavaScript騎自行車瀏覽了PNG圖像。我使用計時器減少了框架的數量，並在它們之間切換。當然，表演很糟糕，但奏效。該視頻對整個設計非常重要，因此我們決定在IE 11上犧牲性能，以提供完整的體驗。

概括

我希望我已經為您節省了一些時間研究alpha-transparent視頻的想法，現在您可以在網站上納入這樣的動畫元素。我敢打賭，有一天您需要它！

您對如何使用透明視頻有不同的想法嗎？還是已經有一些經驗了？在評論中讓我知道。

以上是在爭吵跨瀏覽器支持的同時，用透明度覆蓋視頻的詳細內容。更多資訊請關注PHP中文網其他相關文章！