將 GIF 替換成影片

羅伯.道森 (Rob Dodson)

在本程式碼研究室中，您可以將 GIF 動畫換成影片，藉此提升效能。

先評估

首先評估網站成效：

  1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。
  2. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  3. 按一下「Lighthouse」分頁標籤。
  4. 確認您已在「類別」清單中勾選「成效」核取方塊。
  5. 按一下「產生報表」按鈕。

完成後，您應該會看到 Lighthouse 已在「使用影片格式製作動畫內容」稽核作業中將 GIF 標記為問題。

下載 FFmpeg

有很多方法可以將 GIF 轉換為影片；本指南使用 FFmpeg。這個虛擬機器已安裝在 Glitch VM 中，如有需要，您也可以按照這篇文章的操作說明，在本機機器上安裝這個軟體。

開啟控制台

再次檢查 FFmpeg 是否已安裝且運作正常：

  1. 按一下「Remix to Edit」，讓專案可供編輯。
  2. 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，您可能需要使用「全螢幕」選項)。
  3. 在控制台中執行：
which ffmpeg

您應該會取回檔案路徑：

/usr/bin/ffmpeg

將 GIF 變更為影片

  • 在控制台中執行 cd images，即可輸入映像檔目錄。
  • 執行 ls 即可查看內容。

畫面應如下所示：

$ ls
cat-herd.gif
  • 在控制台中執行：
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

這會讓 FFmpeg 使用以 -i 標記表示的 input，並將其轉換成名為 cat-herd.mp4 的影片。這項作業可能需要一秒鐘時間。指令完成後，您應該可以再次輸入 ls 並查看兩個檔案：

$ ls
cat-herd.gif  cat-herd.mp4

建立 WebM 影片

雖然 MP4 自 1999 年以來就不斷推出，但 WebM 是最早在 2010 年推出的相對新星。WebM 影片可能比 MP4 影片小許多，因此產生這兩種影片是合理的。感謝您使用 <video> 元素來新增多個來源，因此如果瀏覽器不支援 WebM，可改回使用 MP4。

  • 在控制台中執行：
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • 如要查看檔案大小，請執行：
ls -lh

建議你準備一個 GIF 和兩部影片：

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

請注意，原始 GIF 為 3.7M，MP4 版本為 551K，WebM 版本則為 341K。可省下大筆！

更新 HTML 以重建 GIF 效果

GIF 動畫有三個主要特徵，影片必須重現這些特徵：

  • 自動播放。
  • 這類物件會持續循環播放 (通常但可以避免重複播放)。
  • 他們沒空。

幸好，您可以使用 <video> 元素重新建立這些行為。

  • 在 index.html 檔案中，將 <img> 行替換為：
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

使用這些屬性的 <video> 元素會自動播放、循環播放、不播放音訊，以及以內嵌方式播放 (即非全螢幕)，以及 GIF 動畫預期的所有行為！🎉

指定來源

接下來只需指定影片來源，<video> 元素需要一或多個指向瀏覽器可選擇的不同影片檔案的 <source> 子元素，視格式支援而定。使用連結至外包影片的 <source> 元素更新 <video>：

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

預覽

  • 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。

介面應具有相同的體驗。到目前還不錯。

透過 Lighthouse 驗證

開啟實際網站後：

  1. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按一下「Lighthouse」分頁標籤。
  3. 確認您已在「類別」清單中勾選「成效」核取方塊。
  4. 按一下「產生報表」按鈕。

您應該會發現「使用影片格式動畫內容」稽核已經通過！了不起！💪