將 GIF 替換成影片

在本程式碼研究室中,您將以影片取代 GIF 動畫,以提升效能。

首先評估網站成效:

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

完成後,您應該會看到 Lighthouse 在「使用影片格式的動畫內容」稽核項目中,將 GIF 標示為問題。

取得 FFmpeg

您可以透過多種方式將 GIF 轉換為影片,本指南會使用 FFmpeg。這個套件已安裝在 Glitch VM 中,如有需要,您也可以按照這些操作說明在本機安裝這個套件。

開啟控制台

請仔細檢查 FFmpeg 是否已安裝並能運作:

  1. 按一下「Remix to Edit」,即可編輯專案。
  2. 按一下「Terminal」 (注意:如果沒有顯示「Terminal」按鈕,您可能需要使用「Fullscreen」選項)。
  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 擷取 cat-herd.gif 的輸入內容 (以 -i 標記表示),並將其轉換為名為 cat-herd.mp4 的影片。這項作業應會在 1 秒內完成。指令完成後,您應該可以再次輸入 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>

預覽

  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

使用體驗應會相同。到目前為止都很順利。

使用 Lighthouse 驗證

開啟直播網站:

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

你應該會發現「使用影片格式的動畫內容」稽核項目現在已通過!太厲害了!💪