需求：在系统上实时查看摄像头监控画面，但我拿到的视频地址是m3u8格式，不能直接播放，这里我们用到了 hls.js，实现此功能。
- 开始前我们先了解一下m3u8。
m3u8是苹果公司推出的视频播放标准，是m3u的一种，只是编码格式采用的是UTF-8。m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。
m3u8视频播放时是通过不停的下载视频文件，我们在控制台的network里可以看到。如下图：
network.png
本文以angular为例，如需在vue等前端框架中使用，只需把对应的生命周期、事件绑定、变量声明等改为vue语法即可！
- 好了，接下来我们就开始开发！
1、使用npm安装hls.js；
npm install --save hls.js
2、在HTML文件中添加对应标签；
<div class="page">
<video controls id="video" autoplay="autoplay">
<source type="video/mp4">
</video>
<button (click)="start()">播放</button>
</div>
3、在ts文件中使用
//引用
import HLS from 'hls.js'
//声明两个变量
hls:any;
video:any;
//页面加载时，初始化hls；
ngOnInit() {
this.hls = new HLS();
}
//点击播放
start(){
if (HLS.isSupported()) {
var video = <HTMLVideoElement>document.getElementById('video');
this.hls.attachMedia(video);
hls.loadSource('你的m3u8视频地址');
}
}
-
最终效果如下图：
image.png
至此，功能实现，特此记录！
