MPEG-4 Video(mp4v)编码MP4通过Blob URL加载仅播放音频问题排查

结论 #

该问题确实和编码格式直接相关，具体原因如下： #

两种MP4编码的浏览器支持差异 #

你提到的两种编码虽然都封装在MP4容器里，但属于完全不同的编码标准，浏览器原生支持度差异极大：

• MPEG-4 Video(mp4v)属于老旧的MPEG-4 Part 2编码，现代浏览器的原生<video>硬解码模块普遍不支持该编码
• H264 - MPEG - 4 AVC(part10)(avc1)属于当前通用的H264编码，所有现代浏览器的原生硬解码都完美支持

直链URL可播放、Blob URL无法播放的原因 #

两种加载方式触发的浏览器解码链路完全不同：

1. 直链URL加载时：浏览器会将资源识别为远程媒体资源，加载前会先拉取元数据做兼容性检测，如果检测到是mp4v这类原生硬解码不支持的编码，会自动调用系统级解码器、或者内置的软解码模块做兼容播放，所以可以正常出画面。
2. Blob URL加载时：Blob URL是浏览器为内存中二进制资源分配的临时本地标识，加载时浏览器会跳过远程资源的兼容检测逻辑，直接走原生<video>硬解码链路，硬解码无法识别mp4v编码的视频轨，仅能正常解析兼容性更好的音频轨，就会出现只有声音没有画面的问题。

你写的Blob创建和<video>调用代码本身没有语法问题，问题出在资源编码和加载链路的匹配上。 #

修复方案 #

• 最优方案：将所有mp4v编码的MP4资源转码为H264编码，转码后不管是直链加载还是Blob URL加载都可以正常播放，没有兼容性问题
• 若必须保留原编码资源：可以在前端引入wasm版的ffmpeg解码器，手动解码视频帧后渲染到canvas上，不过该方案性能开销远大于原生解码，仅适合小视频场景使用。

内容的提问来源于stack exchange，提问作者Rhythm Walia