# video标签播放视频有声音没画面

# 问题

前端用H5的video标签做了播放器,部分MP4文件上传成功后,遇到了播放时只有声音没有画面的问题。

经过了解之后才知道MP4视频不是说后缀名以.mp4结尾的就是MP4视频,mp4视频还包括不同的编码格式,还有不同的扩展名,都可以统一定义成MP4文件。

# 支持的格式

目前,video标签支持三种视频格式:MPEG 4WebMOgg。各浏览器支持如下:

# 视频编码

其实,上面的三种格式只是封装格式,并非编码,而video标签对编码也是有要求的:

格式 视频编码 音频编码
Ogg Theora Vorbis
MPEG 4 H.264 AAC
WebM VP8 Vorbis

所以出现这个问题的原因可能是视频的编码不是H.264导致的。

# 查看编码

可以在这个网址https://gpac.github.io/mp4box.js/test/filereader.html,查看视频的编码:

  1. 打开网站
  2. 选择文件,把你的视频上传上去
  3. 点击Load按钮

通过以上三步就能查看到你上传的视频的编码,codecs就是你的视频编码,如下图:

如果是这个编码,是可以正常播放的。

如果是下面这个,会出现有声音没画面的问题。

# 解决问题

把视频文件的视频编码转换成H.264

转码工具:

# 参考

上次更新: 1/13/2020, 5:09:38 PM