video切换清晰度_移动端浏览器中的视频分辨率切换方案

在常见的视频 APP 中，几乎都实现了视频分辨率切换功能。其中有一些会在点击切换分辨率后继续播放当前分辨率视频，稍有延迟后切换到新的分辨率视频，实现了视频分辨率的无缝切换。那么在移动端网页中，我们该如何实现视频分辨率的切换甚至无缝切换功能呢？

视频切换方式

在浏览器环境下，有两种方式可以切换视频：

• 直接修改 video 元素 src。
• 使用 MSE (Media Source Extensions) 播放视频，操作 SourceBuffer。

直接修改 video src 的方式必然会经历视频重新加载的过程，虽然能够实现切换，但无法实现无缝切换。

使用 MSE 的方式，通过操作 SourceBuffer 能够实现无缝切换视频分辨率。遗憾的是 MSE 存在兼容性问题， iOS Safari 不支持 MSE。

因此，在 iOS 中通过 video 元素是无法实现无缝切换的，我们仅在安卓上考虑无缝切换功能。

视频文件格式