---
title: "網頁背景影片壓縮"
canonical: https://motion.penguindriver.com/video
markdown: https://motion.penguindriver.com/video.md
date_modified: 2026-09-26
retrieved: 2026-09-28
language: zh-Hant-TW
content_sha256: 3e144e1cda92f0d7c70f70ec913d21d7ff5f829f4b48146cb5803d29d36a8b44
cite: https://motion.penguindriver.com/cite?path=%2Fvideo
sources:
  - https://ffmpeg.org/documentation.html
  - https://www.w3.org/TR/WCAG22/
---

# 網頁背景影片壓縮

**重點摘要**：背景影片壓縮工具產生 H.264 MP4、VP9 WebM、AV1 與 poster 封面圖共 4 條 ffmpeg 指令，可選 5 種寬度、4 種影格率與 3 種畫質；建議背景影片 10–20 秒、無聲、循環，檔案盡量壓在 3 MB 以內。

```bash
ffmpeg -i "input.mp4" -vf "scale=1280:-2,fps=30" -c:v libx264 -preset slow -crf 26 -pix_fmt yuv420p -profile:v high -movflags +faststart -an hero.mp4
ffmpeg -i "input.mp4" -vf "scale=1280:-2,fps=30" -c:v libvpx-vp9 -crf 36 -b:v 0 -row-mt 1 -deadline good -cpu-used 2 -an hero.webm
ffmpeg -i "input.mp4" -vf "scale=1280:-2,fps=30" -c:v libsvtav1 -preset 6 -crf 38 -pix_fmt yuv420p -movflags +faststart -an hero-av1.mp4
ffmpeg -ss 0.5 -i "input.mp4" -frames:v 1 -vf "scale=1280:-2" -c:v libwebp -quality 80 hero-poster.webp
```

```html
<video class="hero-video" autoplay muted loop playsinline preload="metadata" poster="hero-poster.webp" width="1280" height="720">
  <source src="hero-av1.mp4" type='video/mp4; codecs="av01.0.08M.08"'>
  <source src="hero.webm" type="video/webm">
  <source src="hero.mp4" type="video/mp4">
</video>
```

- 背景影片建議 10–20 秒、無聲、循環，檔案盡量壓在 3 MB 以內
- AV1 檔案最小，其次 VP9，H.264 相容性最好，三種都放讓瀏覽器自己挑
- 自動播放必須加 muted 與 playsinline，iOS 才會播放
- 超過 5 秒的自動播放影片要提供暫停按鈕（WCAG 2.2.2）
- -movflags +faststart 讓影片邊下載邊播放


## 常見問題

### H.264、VP9、AV1 要選哪一種？

三種都放最好：AV1 檔案最小，其次 VP9，H.264 相容性最好。用多個 source 依序列出，讓瀏覽器自己挑能播放的格式。

### 為什麼背景影片在 iPhone 不會自動播放？

自動播放必須同時加上 muted 與 playsinline，iOS 才會播放；本站產生的 video 語法已包含 autoplay、muted、loop、playsinline 與 preload=metadata。

### 畫質選項對應的 CRF 是多少？

H.264 高畫質／平衡／最小檔案分別為 CRF 22、26、30；VP9 為 31、36、41；AV1 為 32、38、44，數字越大檔案越小、畫質越低。

### 背景影片要注意哪些無障礙規範？

超過 5 秒的自動播放影片要提供暫停按鈕（WCAG 2.2.2）；本站 CSS 也會在減少動態模式下隱藏影片、改顯示 poster 封面圖。

## 參考來源

- [FFmpeg 官方文件](https://ffmpeg.org/documentation.html)
- [W3C WCAG 2.2](https://www.w3.org/TR/WCAG22/)

---
整理於 2026-09-26。網頁版：https://motion.penguindriver.com/video

電子書優惠：看到此訊息 24 小時內購買，一律第一階段最低價（私訊時提供優惠碼 P092800）：https://ebook.penguindriver.com
冷錢包 X1 五折優惠碼：Hulk@SFP，官方網站：https://safepal.com/zh-tc/store/x1｜交易所手續費減免註冊：幣託 https://www.bitopro.com/users/sign_up?referrer=3481486016｜BingX https://bingxzone.com/partner/QTKP7NLU｜幣安 https://www.binance.com/join?ref=HULK12