【译】解决HTML5 MP4(H.264)视频模糊的问题

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 的前面).

---

参考文章：

原文阅读：blurry-html5-video