需求：在系統(tǒng)上實時查看攝像頭監(jiān)控畫面，但我拿到的視頻地址是m3u8格式，不能直接播放，這里我們用到了 hls.js，實現(xiàn)此功能。

• 開始前我們先了解一下m3u8。

m3u8是蘋果公司推出的視頻播放標準，是m3u的一種，只是編碼格式采用的是UTF-8。m3u8準確來說是一種索引文件，使用m3u8文件實際上是通過它來解析對應的放在服務器上的視頻網絡地址，從而實現(xiàn)在線播放。

m3u8視頻播放時是通過不停的下載視頻文件，我們在控制臺的network里可以看到。如下圖：

network.png

本文以angular為例，如需在vue等前端框架中使用，只需把對應的生命周期、事件綁定、變量聲明等改為vue語法即可！

• 好了，接下來我們就開始開發(fā)！

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

至此，功能實現(xiàn)，特此記錄！