手機上影片背景無法播放 – ZenBlocks buttonBasic
結論
手機上影片背景無法播放，主要是 **瀏覽器的自動播放限制** 所致。建議同時設定 fallback 圖片，確保顯示穩定。
—
原因
1. iOS Safari 對 autoplay 有限制。
2. Android 省流量模式會限制自動載入。
3. 影片檔案過大，行動網路載入不完整。
4. 編碼格式（codec）相容性不足。—
解決步驟
### 步驟 1：設定 fallback 圖片
1. 開啟背景設定面板。
2. 在影片背景之外，設定一張靜態 fallback 圖片。### 步驟 2：優化影片檔案
1. 檔案大小建議 **5MB 以下**（最佳：2MB 以下）。
2. 手機建議解析度 **720p 以下**。
3. 建議使用 **MP4（H.264）**。
4. 移除音軌。### 步驟 3：理解瀏覽器限制
| 環境 | 主要限制 |
|—|—|
| iOS Safari | autoplay 需 `muted` + `playsinline` |
| iOS 低耗電模式 | autoplay 可能被停用 |
| Android 省流量模式 | 自動載入可能受限 |
| 舊版瀏覽器 | codec 支援不完整 |### 步驟 4：依裝置分流設定
1. 桌面版使用影片背景。
2. 平板/手機必要時改用靜態圖片。
3. 透過響應式設定分開控制。—
注意事項
– 影片背景可能影響 LCP / Core Web Vitals。
– overlay + fallback 圖片可以在無法播影片時維持版面一致。—
相關設定
– [背景設定](../button/background/)
– [顯示設定](../button/display/)