vue + hls 循環 實時監控視頻（m3u8格式）列表

默認vue已經安裝好了，UI組件這裏以vux爲例，用什麼UI庫問題不大
注：循環這種實時視頻的作法其實不推薦，可是你保不許，真的有這樣的須要

1. 安裝依賴 hls.js

npm i hls.js -S

2. 使用

2.1 html 循環渲染video節點

<div v-for="video in videos" :key="video.ref" class="videoList">
  <p>
    <span>XX監控</span>
    <span>通道{{video.which}}</span>
    <span><x-button @click.native="playVideo(video.which)" mini>播放</x-button><span>
  </p>
  <div class="videoContainer">
    <video :ref='video.ref'></video>
  </div>
</div>

2.2 【js】hls掛載節點，解析

// 結構略
import Hls from 'hls.js';

data() {
  return {
    videos: []
  }
},

methods: {
  // 節點掛載---$refs
  attach() {
    for (let index = 0; index < this.videos.length; index++) {
      if (Hls.isSupported()) {
        this.videos[index].hls = new Hls();
        this.videos[index].hls.attachMedia(this.$refs[this.videos[index].ref][0]);
      }
    }
  },

  // 播放實時監控
  playVideo(channel) {
    let _this = this;
    let videoRef = this.videos[channel-2].ref;
    this.$refs[videoRef][0].controls = 'controls';
    // 請求和心跳等涉及業務的略
    _this.videos[channel-2].hls.loadSource(res.data.url);
    // 正常解析
    _this.videos[channel-2].hls.on(Hls.Events.MANIFEST_PARSED, function () {
      _this.$refs[videoRef][0].play()
    });
    // 失敗
    _this.videos[channel-2].hls.on(Hls.Events.ERROR, function () {
      根據業務對失敗狀況進行分別處理
    }
  }
}

// 選擇生命週期（須要$el已經存在，mounted()或者keep-alive的activated()）
// 我這裏使用的是activated()
activated(){
  // axios 請求略(這裏演示用固定數量，通道從2開始)
  this.videos = [];
  for (let i = 0; i < 5; i++) {
    let item = {
      hls: null,
      ref: `video${i+2}`,
      which: i+2,
    }
    this.videos.push(item)
    this.$nextTick(() => {
      this.attach()
    })
  }
}

// 銷燬
deactivated() {
  for (let i = 0; i < this.videos.length; i++) {
    this.videos[i].hls.destroy();
  }
}