前端怎样播放多种格式的视频呢?一些好的回答

424 阅读2分钟

在Html5中video支持的格式比较有限: Ogg、MPEG4、WebM,且有些格式对于浏览器的兼容性却各不同。

视频格式,这是一个很复杂的东西,涉及

  • 编码格式
  • 封装格式

等等,可以参考ffmpeg的文档,不同的编码需要不同的解码器解码(音频和视频还需要分开解码),封装格式又涉及到数据包管理,总之是一个很复杂的东西,所以浏览器中会选择性的内置几个性能特性比较好的格式来支持,比如当前流行的就是MP4 H.264/AAC 这其中H.264是图像编码格式,AAC是音频编码格式。此外为了在线流式播放,还需要特殊处理封装,把一些meta信息写到头部,方便快速开始播放。

avi是一种封装格式,里面可以包裹几乎任何的编码,所以需要在文件信息中提取相应信息,才找到对应解码器来播放。 wmv曾经是一直流行的浏览器支持的格式(微软ie主推的),但现在不流行,被更通用的mp4替代了。

当然,并不是说不能在浏览器中播放,只要能解码,都可以播放,比如对应插件,或者浏览器解码库,但这些开发成本很高,性能效率还不行,还不如直接转码视频到支持的格式来的方便。


如果只是单纯的视频容器不支持,但编码是支持的还是有些办法,比如flv.js就可以让浏览器支持播放avc编码的flv视频,如果是编码不支持就没啥好方法了,强行js/wasm软解也不是不行(比如说github.com/numberwolf.…这个项目就是wasm软解h265编码的视频播放),但对电脑性能要求很高,清晰度高一点解码速度就跟不上了 最好的方案还是服务端转码
如果说网页的访问环境你能控制直接强制要求浏览器型号&版本就是了,如果你控制不了,你就算找到了插件也没法控制用户去安装插件不是吗。


因此我们正常的链路都是上传之后要进行转码的。有的人会说,我用 MSE 进行处理,通过 Media Source Extensions API,解包出视频编码和音频编码之后,已经可以直接播放了,只是用MSE也是用来浏览器底层支持的编码呀,这是行不通的,除非做转码。