[记录]Vue+vue-video-player播放多个直播视频（m3u8格式）
1.用npm安装会报错：“The'flash'techisundefined.Skippedbrowsersupportcheckforthattech”解决方案：将包信息放在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",2.在main.js中引入/*视频监控插件*/importVueVideoPlayerfrom'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)3.在组件中使用="index">
data(){return{list:[//videosource'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(letiinthis.list){this.videoConfig.push({//playbackRates:[0.7,1.0,1.5,2.0],//播放速度autoplay:true,//自动播放控制:true,//Controlbarpreload:"auto",//Videopreloadingmuted:false,//默认情况下任何音频都将静音。loop:false,//导致视频在结束后立即重新开始。language:"zh-CN",aspectRatio:"16:9",//视频比例（如“16:9”或“4:3”）fluid:true,//formadaptivesources:[{type:"application/x-mpegURL",src:this.list[i]}],//poster:"",//视频封面//width:document.documentElement.clientWidth,notSupportedMessage:"此视频暂时不可用，请稍候尝试再次”}）;}},}/*作者：XiNine/九霄个人博客：https://xinine.github.io/上一篇：vue+video.js实现trmp协议的多路视频直播*/
