一、直播流程图
流程图如上所示，各位看官应该不难理解吧。其中H.264是对视频的编码,AAC是对音频的编码。
格式与浏览器的兼容模式如下：
mp4格式就不需要多说了，webm是一种流式的视频格式，这两种视频格式偏点播。hls格式，严格意义上来讲，不是一种视频格式，而是一种视频协议，对于视频格式来说，hls是ts文件，即“.ts”格式，flv是早期的flash的一种格式，B站的H5播放器和Flash播放器都能播放flv格式的。hls和flv是偏直播的播放形式，当然也可以做点播。
二、直播协议
1. HLS协议
hls协议是苹果推出的直播协议，对应hls格式，即“.ts”。工作原理图如下：
对于hls协议来说，它会首先发放一个m3u8索引文件，video在一般浏览器中不支持m3u8文件的识别，safari中可以。video拿到m3u8文件，它会对其进行解析，解析的内容就为图中所示的m3u8中的segment.ts文件，每一个片段即为直播流的分段。
直播是实时的，所以m3u8文件肯定不会是固定的，给的m3u8文件只是当前时间段的索引，segment.ts都会有个时长，在segment总时长之前，video会重新向服务器请求m3u8文件，这是浏览器自身的行为，此时，服务器会返回新的m3u8文件，更新后的segment.ts文件将会改变，可能是2345或者34567等等。
另外，m3u8文件结构并不一定全是由ts文件组成，有可能会嵌套一层m3u8文件，如下所示：
如果m3u8文件中包含m3u8文件，就对应的是master playlist，如果拿到的m3u8文件里只包含ts文件，那就对应的是media playlists。
m3u8文件可以细分为：
live playlists 动态列表
主要用于直播中，m3u8文件会实时更新，m3u8中的内容如下：
第一行表明m3u8的版本，version为版本的声明，默认为3，targetduration为视频的时长，sequence为序号，m3u8文件每变化一次，序号都要加一，9.901代表着下面索引的片断中的视频时长大概多少时间。
event playlist 静态列表
该列表在直播行业几乎是用不到的。静态列表的内容如下:
跟动态列表的区别就在于多了event这个选项参数，代表它是静态。
vod playlist 全量列表
vod含义为点播的意思，即从m3u8文件拿到起，内容就不再变化了。
VOD表明点播，告诉浏览器我这是点播，不用去请求新的m3u8文件，EXT-X-ENDLIST表明结束。
ts文件结构
ts文件结构如下所示：
浏览器解析一个视频，需要知道视频帧，音频帧。对于每个ts文件来说，第一个ts文件会有一个PAT的包，解析时，这个pat的包会告诉你去找一个PMT的包，PMT会告诉你后面要解析到的ts文件中，哪些是视频哪些是音频，分类后，相连的ts包会组成一个帧，再相连再组成一个帧。至于哪些ts包能组成一个帧，这就需要解析ts规范了，ts中有个handler会告诉你这些信息。
2. RTMP协议
RTMP是Real Time Messaging Protocol（实时消息传输协议）的首字母缩写，该协议基于TCP，是一个协议族，包括RTMP基本协议及/RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种设计用来进行实时数据通信的网络协议，主要用来在Flash、AIR平台和支持RTMP协议的流媒体/交互服务器之间进行音频和数据通信。传统的软件跟服务器之间的交互，还是用rtmp协议为主。传输的视频格式为flv，即为“.flv”形式。
上图中的源类似流程图中采集的过程，用户端到源这块是走rtmp协议的话，源推CDN这块是不变的，而CDN到用户这块，走rtmp协议的话，是走TCP方式的。另外，rtmp协议传输过程中是flv视频格式的，只是通信手段不一样，hls协议中，是采用http协议。如果客户端直接走TCP，通信的应答方式在用户端程序端要考虑一些相关问题。
3. HTTP-FLV协议
HTTP-FLV可理解为RTMP的升级版本，传输的视频格式同rtmp一样为flv格式。RTMP用起来比HLS复杂些，但HLS实时性相对差些，有延时。延时跟1个m3u8文件下有几个ts索引文件有关系，需要切分片来降低延时。
HTTP-FLV结合了HLS的优点，采用HTTP请求，又结合了RTMP低延时的特性，因为中间建立了FLV的长连接，中间通信过程相对RTMP协议就不再复杂。相对RTMP协议来说，其优点可总结为：
1）可以在一定程度上避免防火墙的干扰（例如，有的机房只允许80端口通过）
2）可以很好的兼容HTTP302跳转，做到灵活调度
3) 可以使用HTTPS做加密通道
4) 很好的支持移动端
最后，本文就是大概描述了下直播流程中用到的一些协议原理，各位看官可以对应寻找相应知识点。若是未接触过直播行业的前端人员想简单入门直播，了解直播开发流程以及怎么制作简单的直播流来调试video，可以参考下面这课程：
http://coding.imooc.com/class/212.html?mc_marking=3c455cbba442021f00f45332ab6368ef&mc_channel=banner