说到在网页中观看视频，大家一定都不陌生，从早些年的优酷、土豆、爱奇艺到最近热门的斗鱼，熊猫，战旗等直播网站，每天都有成千上万的人在网页中观看视频。可能大家觉得故事情节极其简单，就是网页中有个区域叫播放器，只要点击这个区域，就能能播放我们想看的视频，没了。起初我也是这么认为的，但是如果仔细从根源去分析，播放器就不是一个简单没有故事的框框。下面为大家讲讲播放器背后的故事。
一般我们看视频都是先用下载软件下载到电脑上，再用播放软件观看的，那网页上是如何实现实时地、无需下载等待地观看视频的呢？
这就要谈到流媒体技术了。为了实现流式传输，要先将视频等多媒体文件经过特殊的处理方式分成一个个包，由服务器向客户端连续、实时传送。这样播放器就可以一边顺序下载视频数据，一边播放已下载的那部分视频。HLS就是这样实现顺序流式传输的。这种播放方式只需使用HTTP服务器配合HTTP协议即可实现，而且在传输过程中能够保证数据的可靠传输，所以能够播放高质量的视频，但流式传输网络延时较长，而且较难实现码率适配和随机播放。
刚刚说到HLS协议，它是一种可以从web服务器通过HTTP协议发送音视频到移动端进行播放的流媒体协议，既支持直播又支持点播。它包括一个m3u(8)的索引文件，TS媒体分片文件和可选的key加密串文件。m3u(8)文件里面是一串连续的TS媒体分片文件和对应的媒体信息，播放器先下载m3u8文件，然后根据里面的索引，依次下载对应的TS文件进行播放。HLS系统大致分为三部分：服务器负责对输入的音视频媒体内容进行数字编码，将其封装成适合于内容分发组件进行传送的格式；分发器由web服务器组成。负责接收客户端的请求，并将准备好的媒体内容和相关资源传给客户端；客户端软件(播放器)负责发送请求，下载相关请求的资源，然后将从服务器接收的请求资源以一种持续数据流的形式呈现给用户。
最后我们来说说web播放hls的原理。由于只有safari原生支持播放hls，所以需要播放器自己解码。首先播放器定时的去服务器获取m3u8索引文件并从中解析出TS媒体分片文件的地址和时长，将其存到数组中，与此同时播放器根据解析出来的TS文件地址，按顺序去服务器端获取TS文件。由于html5的video标签原生只支持MP4、WebM、Ogg，不能直接播放TS文件，所以我们要借助mediaSource扩展接口来实现视频封装格式的转换。mediaSource在W3C的扩展文档中是这么定义的：它允许JS脚本动态构建媒体流用于<audio>和<video>，允许JS传送媒体块到HTML5媒体元素。这种接口的应用可以让HTML5播放器实现持续添加数据进行播放，类似于ActionScript中的appendBytes方法，一种添加二进制数据进行播放的方式。播放器在获取到TS文件后需要先调用HTML5的文件接口，将其解析为二进制数组，然后再通过appendBuffer接口将二进制数据添加到sourceBuffer对象中进行播放。由于浏览器对mediaSource的缓冲区大小有严格的限制，所以播放器需要定时去check buffer，按需加载TS文件，防止超过缓冲区大小限制而造成错误。
以上就是我今天要分享的网页视频播放背后的故事，其实这只是移动流媒体技术的凤毛麟角，还有更多的音视频知识等待你去发掘~