vue hls.js 循环多个实时监控视频(m3u8格式)列表

工作当中难免会遇到使用 .m3u8 格式的视频，也就是视频流；项目中要怎么展示这种视频流呢？多个视频同时显示时，怎么能使视频流都能正常播放呢？接下来在 vue 中使用 hls.js 来实现视频流播放功能。

一、安装 hls.js

```
npm i hls.js -S
```

二、html 中渲染video节点

三、初始化并加载 hls.js

import Hls from 'hls.js';

var _self;
export default {
  data() {
    return {
      hls: null
   	  videoSrc: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8'
  },
  mounted() {
    _self = this;
    this.initHls();
  },
  methods: {
    initHls() {
      let globalHls = null;
      if (Hls.isSupported()) { //判断是不是支持hls
        const hls = new Hls(); //初始化对象
        this.hls = hls; //将实例化的对象赋值给外层，即便于销毁
        globalHls = hls; //此处赋值给函数体内的变量，便于下面操作
        hls.loadSource(_self.videoSrc); //加载资源
        hls.attachMedia(_self.$refs.videoContain); //渲染给video对象