Chrome 影片中的 Alpha 透明度

Chrome 影片的 Alpha 版透明度

Chrome 31 現已支援 WebM 中的影片 Alpha 透明度。

換句話說,Chrome 在播放「綠色螢幕」時,會將 Alpha 版納入考量使用以下程式碼編碼為 WebM (VP8VP9) 的影片: 會有一個 Alpha 通道也就是說,您可以在網頁、圖片,甚至是其他影片上,使用透明背景的影片來播放。

有一個 simpl.info/videoalpha。有點超現實,而且有一點粗略估計,但這樣真的有想法了!

如何製作 Alpha 版影片

我們說明的方法使用了開放原始碼工具 Blender 和 ffmpeg:

  1. 使用單一色彩背景 (例如:明亮) 拍攝主體 綠色窗簾。
  2. 處理影片來建立一系列透明的 PNG 靜態圖片 資料。
  3. 以影片格式進行編碼 (在本例中為 WebM)。

另有 以及相關工具 (例如 Adobe After Effects), 。

1. 製作綠幕影片

首先 您必須拍攝主題時 可以「移除」(公開透明)。

最簡單的做法是使用單色背景拍攝影片, 例如螢幕或窗簾。綠色或藍色是最常用的顏色,多半是因為這些顏色和膚色的差異。

幾種 線上指南可以拍攝綠幕影片 (也稱為「綠幕」) 色鍵) 和許多地點,可購買綠色或 提供藍色背景畫面或者,你也可以使用色鍵顏料繪製背景。

Great Gatsby VFX 短片」說明瞭綠幕能達成什麼目標。

拍攝影片的訣竅:

  • 確保拍攝主體中沒有相同顏色的衣服或物體 做為背景,否則會顯示為「孔洞」的結尾處即使是小型標誌或珠寶也會發生問題。
  • 使用一致、均勻的光線,避免使用陰影:主要是為了使 背景中的最小色彩範圍
  • 使用多個散熱光線有助於避免陰影和背景色彩 變化版本。
  • 避免使用閃亮的背景:霧面表面的光澤效果更好。

2. 透過綠幕功能建立原始 Alpha 版影片

下列步驟說明如何利用綠幕功能建立原始 Alpha 影片:

  1. 拍攝綠幕影片後,你可以使用 Blender 等開放原始碼工具將影片轉成影片。 轉換為包含 Alpha 值資料的 PNG 檔案陣列。使用 Blender 的色彩鍵 移除綠色畫面,並將其設為透明。(請注意,PNG 並非 2pulsory:任何保留 Alpha 通道資料的格式都沒有問題。
  2. 使用開放原始碼工具,將 PNG 檔案陣列轉換為原始 YUVA 影片 例如 ffmpeg

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    或者,使用 ffmpeg 指令將檔案直接編碼至 WebM 輸入:

    ffmpeg -i image%04d.png output.webm

如要加入音訊,可以使用 ffmpeg,請在指令中加上例如 :

ffmpeg -i image%04d.png -i audio.wav output.webm

3. 將 Alpha 影片編碼為 WebM

原始 Alpha 版影片可透過兩種方式編碼為 WebM。

  1. 透過 ffmpeg:我們開始支援 ffmpeg 為 WebM Alpha 版影片進行編碼。

    將 ffmpeg 搭配包含 Alpha 版的輸入影片,並將輸出格式設為 WebM 和編碼程序會自動採用正確的格式 這個規格(注意:目前您需要從 Git 樹狀結構取得最新版本的 ffmpeg, )

    指令範例:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. 使用 webm-tools:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools 是一組與 WebM 相關的簡易開放原始碼工具,由 WebM 專案作者負責維護,包括一個用來建立 alpha 透明化 WebM 影片的工具。

    使用 --help 執行二進位檔,即可查看 alpha_encoder 支援的選項清單。

4. 在 Chrome 中播放影片

如要在 Chrome 中播放經過編碼的 WebM 檔案,只要將該檔案設為 影片元素。

他們是怎麼辦到的?

我們訪問 Google 工程師 Vignesh Venkatasubramanian 針對他對 專案。他歸納了涉及的重大挑戰:

  • VP8 位元流不支援 Alpha 通道。因此我們必須 Alpha 值不會破壞 VP8 位元流,且不會中斷現有項目 廣告。
  • Chrome 的轉譯器無法在 Alpha 中轉譯影片。
  • Chrome 針對多種硬體/GPU 裝置具有多個轉譯路徑。每次 必須變更顯示路徑,才能支援 Alpha 影片的顯示。

我們可以想出許多有趣的 Alpha 透明效果用途: 遊戲、互動式影片、合作故事的故事 (加入自己的影片到 背景影片/圖片)、含有變形角色或劇情的影片、網頁應用程式 這類廣告使用重疊影片元件

祝您影片製作愉快!如果您開發了 Alpha 版應用程式,歡迎告訴我們! 資訊公開。

實用資源