在本程式碼研究室中,您可以將 GIF 動畫換成影片,藉此提升效能。
先評估
首先評估網站成效:
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認您已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
完成後,您應該會看到 Lighthouse 已在「使用影片格式製作動畫內容」稽核作業中將 GIF 標記為問題。
下載 FFmpeg
有很多方法可以將 GIF 轉換為影片;本指南使用 FFmpeg。這個虛擬機器已安裝在 Glitch VM 中,如有需要,您也可以按照這篇文章的操作說明,在本機機器上安裝這個軟體。
開啟控制台
再次檢查 FFmpeg 是否已安裝且運作正常:
- 按一下「Remix to Edit」,讓專案可供編輯。
- 按一下「終端機」 (注意:如果「終端機」按鈕未顯示,您可能需要使用「全螢幕」選項)。
- 在控制台中執行:
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 驗證
開啟實際網站後:
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認您已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
您應該會發現「使用影片格式動畫內容」稽核已經通過!了不起!💪