video.js的官网文档https://docs.videojs.com/tutorial-vue.htmlhttps://docs.videojs.com/tutorial-videojs.htmlnpm安装和引入npm install --save video.jsnpm install --save videojs-contrib-hls在main.js中引入 videojs的css文件import ‘video.js/dist/video-js.css’vue 使用video idplayercontainerclassvideo-js vjs-default-skincontrols preloadautowidth500pxheight500px!--source srchttps://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8typeapplication/x-mpegURL/--source:srcvideoUrltypeapplication/x-mpegURL//videoscriptdata(){return{player:null,videoUrl:,}},methods:{getVideo(url){// console.log(视频完整url,url)this.playervideojs(playercontainer,{bigPlayButton:false,textTrackDisplay:false,posterImage:false,errorDisplay:false,controlBar:true,hls:{withCredentials:true},sources:[{type:application/x-mpegURL,// src: https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8, // 你的m3u8地址必填src:url// 你的m3u8地址必填}]},function(){this.play();});},queryVideo(){varparams{}checkVideo(params).then(res{this.videoUrlhttp://123.123.20.5:res.data.data[0].urlthis.getVideo(this.videoUrl)})},}mounted(){this.getVideo();},// 实例销毁之前清除player方法停止播放beforeDestroy(){// this.player.remove();//百度云视频if(this.player){this.player.dispose();//video.js}},// 实例销毁之后移除所有的监听器和完全销毁这些实例清除它与其它实例的连接解绑全部指令及监视器destroyed(){this.$off();this.$destroy();},script切换视频操作button clickchangeVideo()点击切换视频/buttonchangeVideo(){varmyPlayervideojs(playercontainer);myPlayer.src([{type:application/x-mpegURL,src:http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8}]);myPlayer.play();}html使用linkhrefhttps://cdn.bootcss.com/video.js/6.3.3/video-js.min.cssrelstylesheetscriptsrchttps://cdn.bootcss.com/video.js/6.3.3/video.min.js/scriptscriptsrchttps://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js/scriptvideoidsingleVideowidth540height540classvideo-js vjs-default-skincontrolssourcesrc**m3u8路径**typeapplication/x-mpegURL/video/* src放的是视频的路径typeapplication/x-mpegURL不能少 */scripttypetext/javascriptvarplayervideojs(singleVideo);player.play();/script百度云播放器 需要flash插件http://cyberplayer.bcelive.com/demo/new/index.htmlinitVideo(url){// console.log(url)this.playercyberplayer(playercontainer).setup({width:100%,// 宽度也可以支持百分比(不过父元素宽度要有)height:100%,// 高度也可以支持百分比title:视频直播,// 标题isLive:true,// 必须设置表明是直播视频file:http://123.123.20.5:url,// 播放地址// file: http://123.123.20.5:83/openUrl/wVnq5EY/live.m3u8, // 播放地址// file: http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4,autostart:true,// 是否自动播放stretching:uniform,// 拉伸设置repeat:false,// 是否重复播放volume:100,// 音量controls:true,// controlbar是否显示barLogo:true,hls:{reconnecttime:5// hls直播重连间隔秒数},// rtmp: {// reconnecttime: 30, // rtmp直播的重连次数// bufferlength: 0 // 缓冲多少秒之后开始播放 默认1秒// },// primary: flash, // 强制使用flash来播放不设置的话则默认高优使用H5进行播放ak:57ca2f8d164040c7ad4c06e385733fb9,// 公有云平台注册即可获得accessKey});},//需要 index引入script typetext/javascriptsrcstatic/lib/baiduVideo/cyberplayer.js/scriptscript typetext/javascriptsrcstatic/lib/baiduVideo/video.min.js/scriptscript typetext/javascriptsrcstatic/lib/baiduVideo/videojs-contrib-hls.min.js/script