H5的Video标签无法播放MP4文件只有声音无画面

最近在项目中碰到了一个问题：

在利用H5的video标签播放视频时，发现有的视频可以正常播放，但有的只有声音没有画面。

问题发现

为了测试一下，具体是标签用法原因，还是视频文件本身的原因，我将相同的视频文件引入标签，和直接拖入浏览器进行访问。

若直接可以在video标签时，则在浏览器中也可以播放，当在video标签中只有声音没有画面时，浏览器中播放也是如此，因此得知这是文件源的原因，与video本身写法无关。

首先video标签支持的视频格式如下：

• MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

• WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

• Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

 所以我们在网页中遇到的问题其实就是视频流解析不成功，即视频编码不符合要求。

解决方法

使用video标签时，不能被播放的视频的编码格式不是h264，因此当网页播放mp4视频时，出现有声音无图像问题的时候，可以先使用格式工厂转换格式，将输出编码选择AVC（H264），然后再进行调用。