Chrome下用video标签不能正常播放MP4格式视频的解决方法

昨天遇到了这样一个问题，我打算使用HTML5的video标签简单的在网页上插入一个MP4视频，类似这样

<video preload="none" controls>
  <source src="video.mp4" type="video/mp4">
</video>

但是在网页中我点击播放的时候，却发现只有声音而没有图像。不过我用电脑中的视频播放器播放这段视频还是可以看到图像的。那么问题来了，这个锅谁来背？

问题出在哪

经过一些搜索得知，其实根本的问题是虽然大家都是.mp4后缀的文件，但是编码方式不同，而video标签的标准是用H.264方式编码视频的MP4文件（当然video标签还可以播放WebM和OGG格式的文件，这里就不多说了），而我之前使用的视频文件是Xvid编码的MP4文件,所以只能播放出音频而不能看到图像

解决方法

既然知道了问题出在哪，接下来就要想办法把我现有的视频文件转码成H.264编码的文件。
我使用的是Mac, 而且之前并没有装过什么视频转码的应用，搜索了一下发现Mac自带一个功能叫“编码所选视频文件”，我尝试着使用了一下。发现然并卵，生成的文件就像我在浏览器中播放的一样，只有声音没有图像，大概这个功能更适合吧其他格式的文件转换成MP4吧。
经过进一步搜索，发现了ffmpeg这个神器，使用这个命令行的工具，最终完成了视频编码的转换，下面详细介绍一下转换的方法

安装并使用 ffmpeg

我使用的是Mac，并且安装了homebrew，所以可以直接通过homebrew安装ffmpeg（附上一个homebrew的�官网）

brew install ffmpeg

其实ffmpeg的指令有很多，想要详细了解可以参见ffmpeg参数中文详细解释，这里我只需要把一个其他编码格式的MP4文件转换成H.264编码的MP4文件，具体指令如下

ffmpeg -i input.mp4 -vcodec h264 output.mp4

自行替换input和output文件名就可以了，其实这里input文件还可以是其他格式的视频文件，ffmpeg可以自动识别转换的方式，非常便利！
经过上述转换，使用输出的文件在Chrome上播放就没有问题了