在本程式碼研究室中,您將以影片取代 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分頁標籤。
- 確認已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
你應該會發現「使用影片格式的動畫內容」稽核項目現在已通過!太厲害了!💪