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

作者站长头像
站长
· 阅读数 10

目前遇到的问题是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

回复
1个回答
avatar
test
2024-07-15

因为不同浏览器对于 MP4 编码格式的兼容是不一样的,不支持的就会变成无画面或者直接无法播放。isom3gp4 就是 3GP 也许可以在 FireFox 内播放(也就是说它并不是MP4格式)。answer image具体兼容性可以从这里看 "video" | Can I use

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

相关阅读

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容