Hls: 播放 m3u8 及 自定义m3u8 内容

1. 什么是HSL？

HLS 的工做原理是把整个流分红一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端能够选择从许多不一样的备用源中以不一样的速率下载一样的资源，容许流媒体会话适应不一样的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的 extended M3U (m3u8) playlist文件，用于寻找可用的媒体流。（转载自：Eduve.org）

2. 如何播放？

 1. 可使用 hls.js 播放。

 2. 使用播放器插件：DPlayer , 使用过程比较方便简单，可是也须要依赖hls.js 。 下面代码使用该插件播放。 

3. 示例代码

  Dplayer 简单配置:

const dp = new DPlayer({
    container: document.getElementById('dplayer'), // 播放容器
    screenshot: true, // 开启截图功能
    video: {
        url: 'demo.mp4', // 播放视频地址
        pic: 'demo.jpg', // 封面
        thumbnails: 'thumbnails.jpg' // 缩略图
    }
});复制代码

 Vue:  切记放在 mounted 内

播放 Hls 还须要下载 hls.js 依赖。 并初始化。  代码中的type 则是视频类型。

支持类型：'auto'，'hls'，'flv'，'dash'，'webtorrent'，'normal'或其余自定义类型 详情看Dplayer 官网说明。 

播放很简单。 传入 m3u8 的播放地址便可。

4. 本地自定义 m3u8 播放内容

m3u8 定义文件格式，点击查看。 下面类型转载自（简书-Whyn），前面就是他的介绍连接。

▷ EXTM3U：代表该文件是一个 m3u8 文件。每一个 M3U 文件必须将该标签放置在第一行。
▷ EXT-X-VERSION：表示 HLS 的协议版本号，该标签与流媒体的兼容性相关。该标签为全局做用域，使能整个 m3u8 文件；每一个 m3u8 文件内最多只能出现一个该标签订义。若是 m3u8 文件不包含该标签，则默认为协议的第一个版本。

▷EXT-X-TARGETDURATION：表示每一个视频分段最大的时长（单位秒）。该标签为必选标签。

▷ EXTINF：表示其后 URL 指定的媒体片断时长（单位为秒）。每一个 URL 媒体片断以前必须指定该标签。该标签的使用格式为： #EXTINF:<duration>,[<title>],其中，参数 duration能够为十进制的整型或者浮点型，其值必须小于或等于 EXT-X-TARGETDURATION 指定的值（注：建议始终使用浮点型指定时长，这可让客户端在定位流时，减小四舍五入错误。可是若是兼容版本号 EXT-X-VERSION 小于 3，那么必须使用整型）。

连接则是 ts 文件。 由于涉及跨域，我这里把它下载下来了。 文件示例

▷ ENDLIST: 表示m3u8 结束符

这里先建立一个m3u8的文本内容， 而后转为 Blob 对象。再使用 URL 转换为 blob 地址。就能够播放了。

若是以为这篇文章对你有帮助，请瞄准你的左键，疯狂点击它，谢谢。

转载请注明出处，感谢配合。