最近在项目中碰到了一个问题:
在利用H5的video标签播放视频时,发现有的视频可以正常播放,但有的只有声音没有画面。
问题发现
为了测试一下,具体是标签用法原因,还是视频文件本身的原因,我将相同的视频文件引入标签,和直接拖入浏览器进行访问。
若直接可以在video标签时,则在浏览器中也可以播放,当在video标签中只有声音没有画面时,浏览器中播放也是如此,因此得知这是文件源的原因,与video本身写法无关。
首先video标签支持的视频格式如下:
-
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
-
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
-
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
所以我们在网页中遇到的问题其实就是视频流解析不成功,即视频编码不符合要求。
解决方法
使用video标签时,不能被播放的视频的编码格式不是h264,因此当网页播放mp4视频时,出现有声音无图像问题的时候,可以先使用格式工厂转换格式,将输出编码选择AVC(H264),然后再进行调用。