尧都网站建设,设计培训网页,网站建设参考文献资料,vue做购物网站vue实现海康H5视频插件播放视频的实例#xff0c;实现取流失败了之后重新获取新的流播放视频
h5player是一个基于HTML5的流式网络视频播放器#xff0c;无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。
首先去海康开发平台#xff0c;把插…vue实现海康H5视频插件播放视频的实例实现取流失败了之后重新获取新的流播放视频
h5player是一个基于HTML5的流式网络视频播放器无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。
首先去海康开发平台把插件包给下载下来。但是这个包需要登录下才可以获取到
地址https://open.hikvision.com/download/5c67f1e2f05948198c909700?type20
不想登录可以去这里拿https://download.csdn.net/download/lu6545311/88562387 一、引入插件包
因为目前项目用的是vue2.5所以我的资源包是放在了static目录下面 然后在index.html里面再引入
script src/static/js/h5player/h5player.min.js/scrip二、使用
1因为我们项目有多个地方使用这个播放器所以是做成了组件的形式然后进行引入使用
//子组件
templatediv idH5Play/div
/template//父组件引入
HKH5Player refhkH5Player resetVideoMaxresetVideoH5 getWndPkgetWndPk/HKH5Player2初始化
let that this
//设置播放容器的宽高并监听窗口大小变化
window.addEventListener(resize, () {this.player.JS_Resize()
})this.player new window.JSPlugin({szId: H5Play,szBasePath: ../../static/js/h5player,//在集成过程中new JSPlugin时候必填szBasePath: ./dist, // 必填,引用H5player.min.js的js相对路径否则会引起内部加载解码库异常iMaxSplit: this.maxSplit, //分屏播放默认最大分屏4*4iCurrentSplit: 1,openDebug: true,oStyle: {borderSelect: #FFCC00, //选中窗口的边框颜色},// 当容器div#play_window有固定宽高时可不传iWidth和iHeight窗口大小将自适应容器宽高// iWidth: 600,// iHeight: 400,
})3事件回调绑定实现取流失败了之后重新获取新的流播放视频
this.player.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex) { //插件选中窗口回调console.log(windowSelect callback: , iWndIndex);//每一次窗口变化都会触发这个用来记录窗口方便后面进行取流失败了针对对应的窗口视频进行再次播放------------that.$emit(getWndPk,iWndIndex) //调用父组件的方法并且把当前的窗口传过去为了记录当前视频的pk},pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调console.log(pluginError callback: , iWndIndex, iErrorCode, oError);//视频爆发错误之后进行想要的逻辑操作这里是为了再次取流播放视频------------that.showErrror(iErrorCode,iWndIndex) //iErrorCode 错误码 iWndIndex 错误的视频窗口对应上面获取到的是窗口来进行操作},windowEventOver: function (iWndIndex) { //鼠标移过回调//console.log(iWndIndex);},windowEventOut: function (iWndIndex) { //鼠标移出回调//console.log(iWndIndex);},windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调//console.log(iWndIndex);},windowFullCcreenChange: function (bFull) { //全屏切换回调console.log(fullScreen callback: , bFull);},firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调console.log(firstFrame loaded callback: , iWndIndex, iWidth, iHeight);},performanceLack: function () { //性能不足回调// console.log(performanceLack callback: );}
});4 开始播放视频
//playURL:播放地址 ws://1111111
// mode 0 普通模式 1 高级模式 这里用的是高级模式
//index 窗口
this.player.JS_Play(playURL, { playURL, mode }, index).then(() { console.log(realplay success) },e { console.error(e) }
)
//自动跳转下一个窗口
index index 1;
if (index this.maxSplit) { index 0 }
player.JS_SelectWnd(index);5停止播放视频、销毁视频
this.player.JS_StopRealPlayAll(); //全部
this.player.JS_Stop(); //单个6切换窗口数
//splitNum 最大 4
this.player.JS_ArrangeWindow(splitNum).then(() { console.log(arrangeWindow to ${splitNum}x${splitNum} success) },e { console.error(e) }
)7获取错误码然后进行提醒
在上面的第三点中事件的回调我们可以获取到视频播放错误的错误码然后官网下载的开发文档里面有对应的错误码但是好像是不完整的但是够用。
showErrror(val,iWndIndex){let list {0x12f900005:高级模式不支持该功能,0x12f900006:高级模式的解码库加载失败,0x12f900008:url格式错误,0x12f900009:取流超时错误,0x12f900010:设置或者是获取音量失败因为没有开启音频的窗口,0x12f900011:设置的音量不在1-100范围,0x12f910000:websocket连接失败请检查网络是否通畅URL是否正确,0x12f910010:取流失败,0x12f910011:流中断电脑配置过低程序卡主线程都可能导致流中断,0x12f910014:没有音频数据,0x12f910015:未找到对应websocket,取流套接字被动关闭的报错,0x12f910016:websocket不在连接状态,0x12f910017:不支持智能信息展示,0x12f910018:websocket长时间未收到message,0x12f910019:WSS连接失败原因端口尚未开通、证书未安装、证书不安全,0x12f910020:单帧回放时不能暂停,0x12f910021:已是最大倍速,0x12f910022:已是最小倍速,0x12f910023:ws/wss连接超时默认6s超时时间原因网络异常网络不通,0x12f910026:jsdecoder1.0解码报错视频编码格式不支持,0x12f910027:后端取流超时主动关闭连接(设备突然离线或重启网络传输超时20s),0x12f910028:设置的缓冲区大小无效大小0-510241024,不在该范围的报错,0x12f910029:普通模式的报错码流异常导致黑屏尝试重新取流,0x12f910031:普通模式下播放卡主会出现,0x12f910032:码流编码格式普通模式下不支持可切换高级模式尝试播放,0x12f920015:未调用停止录像再次调用开始录像,0x12f920016:未开启录像调用停止录像接口错误,0x12f920017:紧急录像目标格式不支持非ps/mp4,0x12f920018:紧急录像文件名为null,0x12f930010:内存不足,0x12f930011:首帧显示之前无法抓图请稍后重试,0x12f950000:采集音频失败可能是在非https域下使用对讲导致,0x12f950001:对讲不支持这种音频编码格式,0x12f900001:接口调用参数错误,0x12f900002:不在播放状态,0x12f900003:仅回放支持该功能,0x12f900004:普通模式不支持该功能}if (list[val]) {this.$message.error(list[val])console.error(list[val]);}//防止一直在请求我们只给你两个错误进行再次取流各自根据业务进行调整if ([0x12f910011,0x12f910027].includes(val)) {this.$emit(resetVideoMax,iWndIndex); //调用父组件的方法并且把发生错误的窗口闯过去this.player.JS_SelectWnd(iWndIndex); // 把当前窗口选择到发生错误的窗口}
},三、父组件的写法
主要是写了怎么视频取流失败后再次请求获取到流进行视频播放的操作
1在父组件调用插件初始化方法
mounted() {setTimeout(function (){that.$refs.hkH5Player.初始化方法();that.$refs.hkH5Player.初始化方法();that.$refs.hkH5Player.初始窗口数量(1);},200)
}2记录视频窗口的getWndPk方法
getWndPk(index){// h5窗口变化的时候进行// 播放视频的时候记录窗口对应的pk//这里是把对应窗口的pk记录起来计算你手动切换的窗口也可以记录到的this.h5WndIndex index;
},//记录到当前的窗口然后在播放视频的时候把pk存起来
playVideo(pk){this.$axios.post(,{pk:pk,protocol:ws}).then(res {this.h5PkList[this.h5WndIndex] pk; //记录对应窗口的视频pk为后面视频失败再次取流做准备//调用子组件的播放视频的方法,具体逻辑自行处理.....this.$refs.hkH5Player.播放视频(url);})
}
3取流失败后调用方法再次取流
resetVideoH5(index){// 取流失败重新获取流let pk this.h5PkList[index]this.playVideo(pk)
},4初始播放多个视频
getList(){list [...pk]//先判断有多少个视频然后来展示多少个窗口最多16个 即num最大是4if (that.videoList.length 4 that.videoList.length 9) {num 3;} else if (that.videoList.length 9) {num 4;} else {num 2;}that.$refs.hkH5Player.初始窗口数量(num);//拿到多个视频pk后循环调用播放方法for (let index 0; index list.length; index) {this.playVideo(list[index].pk)}
}这样就可以实现视频播放失败之后再次取流进行播放
tip重点
1窗口变化的记录触发父组件播放视频的时候接口窗口数把pk或者你再次取流的参数等等存起来方便后面再次取流 2发生错误之后触发父组件找到对应窗口的错误视频的pk然后再次请求
效果 功能一些具体的功能没有使用到如果想要使用可以去看看下载包里面的开发文档
这样就可以实现视频播放失败之后再次取流进行播放
功能一些具体的功能没有使用到如果想要使用可以去看看下载包里面的开发文档
