vue实现海康H5视频插件播放视频的实例，实现取流失败了之后重新获取新的流播放视频

h5player是一个基于HTML5的流式网络视频播放器，无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。

首先去海康开发平台，把插件包给下载下来。但是这个包需要登录下才可以获取到

地址：https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20

不想登录可以去这里拿：https://download.csdn.net/download/lu6545311/88562387

在这里插入图片描述

一、引入插件包

因为目前项目用的是vue2.5，所以我的资源包是放在了static目录下面

在这里插入图片描述

然后在index.html里面再引入

<script src="/static/js/h5player/h5player.min.js"></scrip>

二、使用

（1）因为我们项目有多个地方使用这个播放器，所以是做成了组件的形式，然后进行引入使用

//子组件
<template><div id="H5Play"></div>
</template>//父组件引入
<HKH5Player ref="hkH5Player" @resetVideoMax="resetVideoH5" @getWndPk="getWndPk"></HKH5Player>

（2）初始化

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)}
}