关于vue.js:vue-vuevideoplayer-播放多个直播视频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: list[i]            }          ],          // poster:"", //视频封面          // width: document.documentElement.clientWidth,          notSupportedMessage: "此视频暂无奈播放，请稍后再试"        });      }    },}/*  author：XiNine / 九霄  集体博客：https://xinine.github.io/  上一篇：vue+video.js实现trmp协定多个视频直播*/