[记录]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协议的多路视频直播*/