compatible_brands: isom3gp4这种格式的mp4文件，前端怎么处理让video标签能正常播放该视频呢？

Question

目前遇到的问题是video标签无法正常解析视频文件。
该种mp4文件完整的ftype metadata如下：
Metadata:

major_brand     : isom
minor_version   : 0
compatible_brands: isom3gp4
creation_time   : 2022-10-10T07:49:12.000000Z

这种文件是测试上传的视频，按理来说应该算偶现的，但又偏偏好几个视频都是这种格式，不知道怎么拍出来的。而且只有web的video标签不能播放，安卓使用的播放器可以正常播放，把文件下载下来用Windows自带的播放器也能播放，请问这是为什么呢？
试过用ffmpeg转换格式，哪怕是转换成一样的mp4格式，也就能正常解析播放。转换后的mp4文件ftype metadata如下：
Metadata:

major_brand     : isom
minor_version   : 512
compatible_brands: isomiso2avc1mp41
encoder         : Lavf59.34.101

这两天也试过在vue项目里集成第三方播放器，但效果都不好（已经尝试了tcPlayer、aliPlayer、WXInlinePlayer）。请问有什么好的方法让video标签能正常解析播放第一种mp4文件吗？(比如video标签type属性中可以指定codec解码)或者有推荐的第三方播放器吗？（ps：目前项目是vue2

Answer 1

因为不同浏览器对于 MP4 编码格式的兼容是不一样的，不支持的就会变成无画面或者直接无法播放。isom3gp4 就是 3GP 也许可以在 FireFox 内播放（也就是说它并不是MP4格式）。

具体兼容性可以从这里看 "video" | Can I use

如果说可以用第三方的播放器的话，可以尝试 VideoJS 这个(不保证肯定可以)。但其实最好的解决方案是服务器端做一次转码，既满足了前端播放的问题，也解决了视频压缩的问题。

相关阅读

Guide to media types and formats on the web - Web 媒体技术 | MDN
网页视频编码指南 - Web 媒体技术 | MDN