將 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 標記表示的輸入， 並轉換為名為 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. 按一下「產生報表」按鈕。

您應該會看到「使用影片格式建立動畫內容」稽核功能 通過！太厲害了！💪