继上一篇文章提到的流媒体传输协议，本章主要详细探讨下HLS协议及其包含的两个组成重要模块ts与m3u8。
1.HLS是什么
HLS (HTTP Live Streaming) 是 Apple 提出的直播流协议，它诞生于2009年，一个意在颠覆流媒体产业的新协议。它的工作原理是把一段视频流切分成一个个的小块，并基于 HTTP 的文件来下载。当媒体流正在播放时，客户端可以根据当前网络环境，方便地在不同的码率流中做切换，以实现更好的观影体验。视频的编码格式为 H264，音频编码格式为 MP3、AAC 或者 AC-3 HLS 由两部分构成：
- .m3u8 文件：以 UTF-8 编码的 m3u 文件，这个文件本身不能播放，只是存放了播放信息的文本文件
- .ts 视频文件：每一个 m3u8 文件，分别对应若干个 ts 文件，这些 ts 文件才是真正存放视频的数据
3. m3u8与ts
m3u8是一个ts列表，对应ts索引文件的配置信息和相关路径（文件中包含了所要用到的ts文件名称，时长等信息），告诉浏览器可以播放这些ts文件。简单归纳下就是，将一个完整视频分成多个ts视频文件，用户下载m3u8文件，通过该文件的索引地址播放具体的每个小段视频，当视频播放时，m3u8 是动态改变的，video 标签会解析这个文件，并找到对应的 ts 文件来播放，参考下图：
4.HLS工作原理
1.通过http请求m3u8的url。
2.sever返回一个m3u8的播放列表，该列表包含了5段数据的url。
3.客户端解析m3u8文件播放列表信息，按顺序的拿每一段数据的url去获取ts流。
4.然后将视频数据合并，让video标签可以无缝播放。
5.结合实际项目应用
HLS 在 PC 端仅支持safari浏览器，所以chrome浏览器使用HTML5 video标签无法播放 m3u8 格式，需要借助其他手段来解码 .m3u8 格式的视频, 才能够通过 标签播放。以常用hls.js为例介绍
原理：使用的主要的技术是MediaSource，通过索引文件解析拿到实际媒体文件传输的地址，然后将视频数据合并，让video标签可以无缝播放， MediaSource接口功能也很纯粹，作为一个媒体数据容器，它可以和HTMLMediaElement进行绑定。基本流程就是通过URL.createObjectURL创建容器的BLob URL，设置到video标签的src上，在播放过程中，通过MediaSource.appendBuffer方法往容器里添加数据，达到更新视频内容的目的。如下图：
6.为什么HLS延时高
HLS 的延时包含了 TCP 握手、m3u8 文件下载与解析、ts 文件下载与解析等多个步骤，可以缩短列表的长度和单个 ts 文件的大小来降低延迟，极致情况下可以缩减列表长度为 1，并且 ts 的时长为 1s，但是这样会造成请求次数增加，增大服务器压力，当网速慢时回造成更多的缓冲。 苹果官方推荐的 ts 时长时 10s，所以这样就会大概有 30s 的延迟。 所以一般为了加快速度，m3u8 放在 Web 服务器上，ts 文件放在 CDN 上
