用技术提升美好事物发生的概率。Technologically,forgreaterprobabilitytobehappy

前言

清晰度无缝切换

清晰度无缝切换

图1.1普通mp4的下载请求过程

使用video进行解码完成播放

然后在做清晰度切换的时候流程如下：

解复用

把数据转换成fmp4格式并传递给MediaSource

删除A的部分Buffer

在下一个关键帧自动完成画质的切换

这个过程看上去比较繁琐，但是所有的操作都是在浏览器端完成，也就是说都是JS来实现的。这样之前说的所有成本问题都不存在，还能做到youtube相同体验的无缝切换。如果大家也想使用这个功能不需要自己再去实现一遍上述流程，可以使用如下代码：

如果对这段代码有什么疑惑，或者想深入了解下它背后是如何实现的，可以参考Github：：

使用video的同学基本上都是这样用的，如下：

利用src属性

2.利用source标签

图2.1video默认下载截图

设置每次加载的数据包大小

设置预加载时长

开启加载队列，完成第一次数据包下载，判断缓冲时间和预加载时长是否满足，不满足请求下一个数据包

具体实现代码如下：