.m3u8 文件播放及VUE处理相关HLS视频流媒体

m3u8索引文件

近期开发过程中，使用了某厂商的视频监控，要在项目中集成实时的监控，根据提供的文档，返回的是一个下面的东西，其实是一个 .m3u8文件，返回的响应头中 ContentType 是application/vnd.apple.mpegurl  下面具体来介绍下它

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:6
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:2
#EXTINF:2,
1_seg_6.ts
#EXTINF:2,
1_seg_7.ts

m3u8是指UTF-8编码格式的M3U文件；M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

具体解释如下

m3u8基本上可以认为就是.m3u格式文件，区别在于，m3u8文件使用UTF-8字符编码。
#EXTM3U m3u文件头，必须放在第一行
#EXT-X-MEDIA-SEQUENCE 第一个TS分片的序列号
#EXT-X-TARGETDURATION 每个分片TS的最大的时长
#EXT-X-ALLOW-CACHE 是否允许cache
#EXT-X-ENDLIST m3u8文件结束符
#EXTINF extra info，分片TS的信息，如时长，带宽等

后续会返回一个个的.ts片段（TS流(Transport Stream)），从而把每个片段拼接起来播放，每个TS 片段可以无缝拼接，播放器能连续播放。

HLS协议

HLS协议（Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议，直接把流媒体切片成一段段ts文件，通过m3u8索引文件按序访问ts文件，客户端不停的从服务器获取文件,实现播放音视频的功能。

Edge及chrome播放插件

浏览器本身是不支持播放的，Edge及chrome可以下载  Native HLS Playback  插件来播放，

然后再浏览器中输入  chrome://extensions/   edge下为  edge://extensions  

VUE处理视频流

可以使用 video.js  来播放