web中视频流的工作原理

职教业务中经常需要和视频播放器打交道，今天分享一下视频流的工作原理。主要包含以下4个部分：

1. Video标签

2. Media Source Extensions

3. Source Buffers

4. Media Segments

一，Video 标签

在WHATWG没有提出Html5标准之前，在web端播放视频都是依赖Flash， 浏览器需要安装Flash 插件才能看视频。

                                                        未安装插件的表现

Html5添加了类似Img的Video标签，满足了更多业务场景。

例如：视频清晰度的切换、播放视频流、切换视频字幕、音频语言等。

Video Tag的简单例子

只要浏览器支持Html5并且有相对应的解码器，就会看到下面的效果

Video提供了非常多的API来操控视频播放，具体可以参考Html5 Video Api

实际业务中就不能只是简单的Video标签设置一下Src了，还使用到了很多强大的Web Api，例如Media Source Extensions。

二，Media Source Extensions

Media Source API，也即是MSE标准，让web开发者无需安装插件就可以通过js直接创建和操作流媒体。结合Video标签和Audio标签就可以实现流媒体的播放。

JS中的MediaSource对象，和它名字一样，代表着媒体资源，更确切的说其实代表了video数据流和audio数据流。

使用MSE之后我们的代码变成了如下，依旧是给Video的Src属性赋值，不同的是使用了MediaSource对象。

但是只有这些还不够，还需要了解一下SourceBuffer对象。

三，Source Buffers

一个MediaSource对象包含一个或者多个SourceBuffer实例。每一个实例都和一种类型的媒体内容相关联。

例如最普通的一个视频包含以下部分：

这样根据类型就可以分别对SourceBuffer进行处理了。相对应的服务端也可以根据类型对数据进行归类存储。

现在可以手动的随意操作视频播放中的音频流和视频流了。

三，Media Segments

在上面的代码中我们使用了一个.mp4文件，包含了所有的音视频，这个只能满足最最简单的使用场景。

在真实的视频网站中会经常用到语言的切换（国语or英文），网络不好的情况下使用自动清晰度等。这种复杂的场景是如何实现的呢？

对音视频流进行分段，也就是Segments。每一段代表着2~10秒不等的音视频数据片段。把每一个片段组合起来，就形成了完整的音视频内容。

想对应的，服务端存储也是以Segments形式，例如上面的例子，服务端存储会如下：

借助Segments我们就不用等整个视频下载完成，只需要拿到一部分Audio的Segments和Video的Segments我们就可以正常播放视频了

-- 实现自动画质 --

很多的视频网站都有自动清晰度的功能，会根据网络情况动态的切换到不同的画质。例如

视频刚加载或者网络不好的情况下，使用较低画质，占用带宽更少，用户的感受上交互时间会被缩短。

实现自动画质也是基于Media Segments，相对应的服务端也会进行一些清晰度相关的存储设计，例如：

然后在JS中根据不同的带宽请求不同的Segments

把不同画质的Segments给append在一起也是完全没有问题的，所以在自动切换画质的过程中视频是继续播放的状态。

-- 实现多语言切换 --

有些视频尤其是电影，都会提供不同语音的音频让用户进行选择。实现多语言的切换，同样也是基于Media Segments。

同样像不同画质切换一样，只需要根据选择项切换不同的Audio Segments。

服务端存储设计如下：

然后在JS中根据用户的选择对Audio Segments进行拉取

如果用户在观看中途切换语言，就需要把之前的Audio Segments进行清除。再重新定位到播放的位置或者从头开始播放。

实际的业务场景中，服务端存储设计会更加复杂，但是前端都是操作Media Segments。

--  end --