技巧: Wordpress 网页(h5) mp4 兼容问题

WordpPess 网页关于 h5 video 标签的兼容问题解决方法。

猜想&分析

在 WordPress 里面插入了一个视频，但是发现兼容问题:

• mp4 格式 chrome 能播放但是没有图片，但是 safari 可以播放
• webm 格式 safari 不能播放，而 chrome 能够播放

如下是 safari 的支持和情况: (简单编码的 mp4 文件支持 OK，但是不支持 webm)

想了一下，会不会是 <video> 或者 [video] 标签的问题？
试过之后，发现并不是(修改标签，没有解决问题)。

google 查了一下，发现各个浏览器对于 html5 的特性支持&实现很奇特。
根据w3c的参考文档，video 目前只支持三种视频编码格式，分别是 ogg，mpeg4，weebm。

以上三种编码格式，各大浏览器对其支持程度如下所示：

    IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

其中，三种音频格式分别解释如下：

• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
• MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

也就是说，并没有哪一种浏览器兼容所有格式，所以选择哪一种格式其实无关紧要。

那就选 mp4 格式吧，但是 mp4 有3种编码，mpg4(xdiv)，mpg4(xvid)，avc(h264)，

按照上面的说法，h264 才是公认的 mp4 标准吧。

然后查看了一下，原来的视频为啥 chrome 播放不了，结果:

编码不对啊。。。坑爹的。

验证&解决

先转码试试

## 利用 ffmpeg 改变编码
$ ffmpeg -i 阿难少女1.mp4 -vcodec h264 阿难少女.mp4

发现问题解决了。

说明 Mp4 格式的播放问题就是 因为编码

补充&总结

当然也可以使用其他工具进行转码，不过何必呢？ ffmpeg 不够强大么？

查看的话，可以简单的查看简介: (使用命令的话，主要看 Stream 这一栏)

总结:

video 标签可以播放 mp4, webm 和 ogg 格式的文件

但是播放 mp4 文件格式，一定要求编码是 h264 。