Video.js播放m3u8格式视频流

video.js的官网文档

https://docs.videojs.com/tutorial-vue.html
https://docs.videojs.com/tutorial-videojs.html

npm安装和引入

npm install --save video.js；
npm install --save videojs-contrib-hls

在main.js中引入 videojs的css文件

import ‘video.js/dist/video-js.css’

vue 使用

<video id="playercontainer"class="video-js vjs-default-skin"controls preload="auto"width="500px"height="500px"><!--<source src="https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8"type="application/x-mpegURL"/>--><source:src="videoUrl"type="application/x-mpegURL"/></video><script>data(){return{player:null,videoUrl:'',}},methods:{getVideo(url){// console.log('视频完整url',url)this.player=videojs("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.videoUrl='http://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 @click="changeVideo()">点击切换视频</button>changeVideo(){varmyPlayer=videojs("playercontainer");myPlayer.src([{type:"application/x-mpegURL",src:"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"}]);myPlayer.play();}

html使用

<linkhref="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css"rel="stylesheet"><scriptsrc="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script><scriptsrc="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script><videoid="singleVideo"width=540height=540class="video-js vjs-default-skin"controls><sourcesrc="**m3u8路径**"type="application/x-mpegURL"></video>/* src放的是视频的路径，type="application/x-mpegURL"不能少 */<scripttype="text/javascript">varplayer=videojs('singleVideo');player.play();</script>

百度云播放器 需要flash插件

http://cyberplayer.bcelive.com/demo/new/index.html

initVideo(url){// console.log(url)this.player=cyberplayer("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 type="text/javascript"src="static/lib/baiduVideo/cyberplayer.js"></script><script type="text/javascript"src="static/lib/baiduVideo/video.min.js"></script><script type="text/javascript"src="static/lib/baiduVideo/videojs-contrib-hls.min.js"></script>