前端播放m3u8格式视频

需求：在系统上实时查看摄像头监控画面，但我拿到的视频地址是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文件中添加对应标签；

    
    播放

3、在ts文件中使用

//引用
import HLS from 'hls.js'

//声明两个变量
hls:any;
video:any;

//页面加载时，初始化hls；
ngOnInit() {
    this.hls = new HLS();
}

//点击播放
start(){
    if (HLS.isSupported()) {
      var video = document.getElementById('video');
      this.hls.attachMedia(video);
      hls.loadSource('你的m3u8视频地址');
    }
  }

• 最终效果如下图：

  
  
  image.png

至此，功能实现，特此记录！