【譯】解決HTML5 MP4(H.264)視訊模糊的問題
阿新 • • 發佈：2019-01-31
MP4視訊檔案是所有主要的現代瀏覽器都認可和接受的檔案格式。如果你想知道具體的支援情況，請檢視 Can I Use
但是!當 HTML5視訊標籤Video 嵌入網頁中,如果沒有正確配置好你的MP4視訊會得到一個模糊影象的視訊。發生這種情況的原因是,這種型別的視訊和其編碼模式有一些具體的要求沒有得到正確的處理。
學習使用以下簡單的建議將幫助你滿足這些需求,將為您的web頁面生成你清晰的MP4視訊。
建議：
1、如果可以的話，請使用標準的 4:3 或16:9 的視訊大小比例。請看原因
2、使用大小的倍數4:3或16:9的縱橫比和16的倍數(16 x16畫素正方形塊級區域的編碼器)
| 4:3比例的公式 | 16:9的寬高比公式 |
|---|---|
| Width: 64*n / Height: 48*n | Width: 256*n / Height: 144*n |
* 備註：n可以是任何的自然數。
3、如果您已經有一個自定義大小視訊和你想要迅速調整為一個完美的看,嘗試“MP4視訊大小校正器”這個頁面上。
附加技巧: 在chrome 瀏覽器中新增 Hack css 方法
-webkit-filter: brightness(108.5%);同時使用 .webm 和 .mp4 的檔案格式 。(.webm 要放在 .mp4 的前面).
參考文章：