摘要：默認(rèn)已經(jīng)安裝好了，組件這里以為例，用什么庫問題不大注循環(huán)這種實(shí)時(shí)視頻的做法其實(shí)不推薦，但是你保不準(zhǔn)，真的有這樣的需要安裝依賴使用循環(huán)渲染節(jié)點(diǎn)監(jiān)控通道播放掛載節(jié)點(diǎn)，解析結(jié)構(gòu)略節(jié)點(diǎn)掛載播放實(shí)時(shí)監(jiān)控請求和心跳等涉及業(yè)務(wù)的略正常解

默認(rèn)vue已經(jīng)安裝好了，UI組件這里以vux為例，用什么UI庫問題不大
注：循環(huán)這種實(shí)時(shí)視頻的做法其實(shí)不推薦，但是你保不準(zhǔn)，真的有這樣的需要

npm i hls.js -S

  

    XX監(jiān)控
    通道{{video.which}}
    播放
  
  

    
  

// 結(jié)構(gòu)略
import Hls from "hls.js";

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

methods: {
  // 節(jié)點(diǎn)掛載---$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]);
      }
    }
  },

  // 播放實(shí)時(shí)監(jiān)控
  playVideo(channel) {
    let _this = this;
    let videoRef = this.videos[channel-2].ref;
    this.$refs[videoRef][0].controls = "controls";
    // 請求和心跳等涉及業(yè)務(wù)的略
    _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 (event, data) {
      if (data.fatal) {
        switch(data.type) {
          // 網(wǎng)絡(luò)錯誤導(dǎo)致的錯誤，據(jù)觀察這種類型的錯，占比最高
          case Hls.ErrorTypes.NETWORK_ERROR:
            // 根據(jù)自己業(yè)務(wù)（心跳/錯誤次數(shù) 需要加載還是重新請求，這里只給出簡單的，加載情況作為示例）
            hls.startLoad();
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            // 多媒體錯誤
            hls.recoverMediaError();
            break;
          default:
            _this.videos[channel-2].hls.destroy();
            _this.$nextTick(() => {
            // 非網(wǎng)絡(luò)或多媒體錯誤，重新獲取url
             _this.playVideo(channel);
           })
           break;
        }
      }
    }
  }
}

// 選擇生命周期（需要$el已經(jīng)存在，mounted()或者keep-alive的activated()）
// 我這里使用的是activated()
activated(){
  // axios 請求略(這里演示用固定數(shù)量，通道從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();
  }
}