【记录】Vue + vue-video-player 播放多个直播视频（m3u8格式）

一、前提
用 npm 安装会报错误：

"The "flash" tech is undefined. Skipped browser support check for that tech"

解决方案：
把包信息放到 package.json 中的 dependencies；
删除 node_modules 文件，重新 cnpm 安装

"videojs-contrib-hls": "5.14.1",
"videojs-contrib-hls.js": "3.2.0",
"videojs-flash": "2.1.0",
"vue-video-player": "4.0.6",

二、在 main.js 中引入

/* 视频监控插件 */
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import 'videojs-contrib-hls/dist/videojs-contrib-hls'
Vue.use(VueVideoPlayer)

三、组件中使用

 <div class="video-wrap">
    <video-player
      class="vjs-custom-skin videosa"
      :options="item"
      v-for="(item,index) in videoConfig"
      :key="index"
    ></video-player>
  </div>

data(){
  return {
    list:[//视频源
      'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
      'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
      'http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8',
      'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8'
    ],
    videoConfig:[]//视频配置信息
  }
},

mounted(){
 this.getVideoList();
},

methods:{
  getVideoList() {
      for (let i in this.list) {
        this.videoConfig.push({
          // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //自动播放。
          controls: true, //控制条
          preload: "auto", //视频预加载
          muted: false, //默认情况下将会消除任何音频。
          loop: false, //导致视频一结束就重新开始。
          language: "zh-CN",
          aspectRatio: "16:9", // 视频比例（例如"16:9"或"4:3"）
          fluid: true, //窗体自适应
          sources: [
            {
              type: "application/x-mpegURL",
              src: this.list[i]
            }
          ],
          // poster:"", //视频封面
          // width: document.documentElement.clientWidth,
          notSupportedMessage: "此视频暂无法播放，请稍后再试"
        });
      }
    },
}

/*
  author：XiNine / 九霄
  个人博客：https://xinine.github.io/
  上一篇：vue+video.js实现trmp协议多个视频直播
*/