为什么Chrome中HTML的video标签加载部分MP4视频仅显示音频无画面

问题根本原因 #

MP4是视频容器格式，而非编码标准，你遇到的异常视频本质是使用了Chrome不支持的编码格式：

• Chrome原生仅支持 H.264（MPEG-4 AVC）视频编码+AAC音频编码 的MP4文件，其余编码如HEVC（H.265）、MPEG-4 Part 2、旧版DivX/XviD编码的MP4，Chrome只会解码音频流，无法解码视频流，所以只出声音不出画面。
• Windows系统自带的播放器通常内置了全量解码库，所以不受编码限制，本地播放正常。

可行解决方案 #

你不需要要求用户自行转码，在服务端做用户无感知的自动转码即可：

1. 上传后自动触发编码检测
   用FFprobe检测用户上传视频的编码参数，如果已经是H.264+AAC的兼容编码，直接放行不用处理，节省服务器资源。
2. 非兼容编码自动转码
   用FFmpeg作为转码核心，异步处理不符合要求的视频，转码命令参考：

   ffmpeg -i 原视频路径 -vcodec libx264 -acodec aac -crf 23 -preset medium 转码后输出路径
   

   转码后的视频适配所有主流浏览器，不会出现只有声音的问题。
3. 缩略图优化（同步解决预览问题）
   转码完成后自动截取视频第一帧作为静态缩略图存储，前端直接加载缩略图，不需要依赖video标签的自动预览，加载速度更快也不会出现预览空白的问题，截图命令参考：

   ffmpeg -i 视频路径 -ss 00:00:01 -vframes 1 缩略图输出路径.jpg
   

前端临时优化（可选） #

可以给你的video标签补充controls属性显示播放控件，提升用户体验，但这个操作无法解决编码不兼容的核心问题，仅作为过渡方案。

内容的提问来源于stack exchange，提问作者Bhavik Hirani