在本程式碼研究室中，您將以影片取代 GIF 動畫，以提升效能。
先評估
首先評估網站成效：
- 如要預覽網站，請按下「View App」。然後按下「Fullscreen」圖示
。 - 按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」Lighthouse分頁標籤。
- 確認已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
完成後，您應該會看到 Lighthouse 在「使用影片格式的動畫內容」稽核項目中，將 GIF 標示為問題。
取得 FFmpeg
您可以透過多種方式將 GIF 轉換為影片，本指南會使用 FFmpeg。這個套件已安裝在 Glitch VM 中，如有需要，您也可以按照這些操作說明在本機安裝這個套件。
開啟控制台
請仔細檢查 FFmpeg 是否已安裝並能運作：
- 按一下「Remix to Edit」，即可編輯專案。
- 按一下「Terminal」 (注意：如果沒有顯示「Terminal」按鈕，您可能需要使用「Fullscreen」選項)。
- 在控制台中執行：
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 驗證
開啟直播網站：
- 按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」Lighthouse分頁標籤。
- 確認已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
你應該會發現「使用影片格式的動畫內容」稽核項目現在已通過！太厲害了！💪