上一个项目有接触到网页视频播放，给到我的是一个m3u8的文件格式，之前并没有接触到视频这一块的技术，而且对于这种文件格式也是第一次，查资料写demo折腾一番，终于成功的在网页播放m3u8格式的视频文件，这里也整理记录一下自己查询到关于视频播放还有流媒体文件播放原理的资料。
视频播放主要技术
视频播放的主要技术点，封装技术，视音频压缩编码技术，流媒体技术
封装技术：就是把视频数据和音频数据打包成一个文件的规范。既我们生活中所看到的各种视频格式，包括avi、mp4、rmvb、flv、mkv、ts等。
视音频压缩编码技术：视频是由一张一张的照片组成的，每秒24帧，如果把所有的图片存储起来，数据量会很大，基于相邻的图片只会有比较微小的差别，视频压缩的原理就是存储每张图片和上一张不一样的地方，这样就大大的压缩的视频的体积，目前常用技术包括H.264、MPEG2、VP9、VP8等，音频编码压缩主要使用AAC、AC-3、MP3、WMA。
流媒体技术：流媒体技术主要用于网络视频播放和直播，在所有封装格式中，除了avi其他都支持流媒体。
视频播放原理
解协议：这一步主要针对流媒体，本地文件播放不需要，将流媒体协议数据解析为相应的封装格式。
解封装：输入的封装格式数据，分离成为视音频流的压缩编码数据。
解码：讲视音频流解码成非压缩的原始数据。
当前主要直播技术
目前最常用的是HLS协议，因为支持度高，技术简单，但是延迟相对于其他的直播技术非常严重
HTTP Live Streaming (also known as HLS) is an HTTP-based media streaming communications protocol implemented by Apple Inc. as part of its QuickTime, Safari, OS X, and iOS software. It resembles MPEG-DASH in that it works by breaking the overall stream into a sequence of small HTTP-based file downloads, each download loading one short chunk of an overall potentially unbounded transport stream. As the stream is played, the client may select from a number of different alternate streams containing the same material encoded at a variety of data rates, allowing the streaming session to adapt to the available data rate. At the start of the streaming session, HLS downloads an extended M3U playlist containing the metadata for the various sub-streams which are available.[2]
这是wikipedia上关于HLS的介绍，他是由苹果公司推出的基于HTTP的流媒体网络传输协议。
主要由两部分构成，.m3u8的palylist索引文件，一个是ts封装格式的视频文件，客户端获取m3u8文件之后，根据索引再请求下载对应的ts文件，流程如下：
将录制的视频使用MPEG-2编码切片，生成索引文件和ts格式的切片视频，client客户端通过HTTP请求获取。
目前移动端和Safari可以用HTML5的viedo标签直接播放，其他浏览器需要做兼容，现在有很多的基于hls的兼容方案，包括video.js的videojs/videojs-contrib-hls、hls.js、Chimeejs/chimee等。
这些HLS的兼容方案工作原理大概相同：
- 通过http请求获取索引文件
- 将传输的视频流二进制数据封装成可直接播放的视频格式
videojs-contrib-hls是利用video.js里SWF的一个特殊模块，将视频二进制数据打包成flv格式
hls.js是转化成MP4格式 - 使用appendBuffer将视频片段添加到SourceBuffer中
作者：水一川
链接：https://www.jianshu.com/p/8845b976fcaf
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
来源：CSDN
作者：caodongfang126
链接：https://blog.csdn.net/caodongfang126/article/details/103920516