vue项目接入海康威视h5player.js播放器

//vue中的scriptconstIS_MOVE_DEVICE=document.body.clientWidth<992//是否移动设备constMSE_IS_SUPPORT=!!window.MediaSource//是否支持mse//data()//海康视频参数player:null,splitNum:1,mseSupport:MSE_IS_SUPPORT,//tabActive:MSE_IS_SUPPORT?'mse':'解码器',tabActive:'解码器',urls:{realplay:'ws://10.19.147.22:559/EUrl/q2jQie4',talk:'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',回放:'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'},回放:{startTime:'2021-07-26T00:00:00'，结束时间：'2021-07-26T23:59:59'，valueFormat:'',seekStart:'2021-07-26T12:00:00',rate:''},muted:true,volume:50,volumeOnSvg:{template:''},volumeOffSvg:{template:''},recordStartState:0、recordStartText:'Record'//created()//海康h5插件初始化setTimeout(function(){_this.init()_this.createPlayer()_this.arrangeWindow()})//methodsmethod//海康视频初始化loadinginit(){//设置播放容器宽高并监听窗口大小变化window.addEventListener('resize',()=>{this.player.JS_Resize()})},createPlayer(){this.player=newwindow.JSPlugin({szId:'player',szBasePath:"/js/",//引入静态资源地址，这里的静态资源存放在public/js文件中，所以设置为jsiMaxSplit:4,iCurrentSplit:2,openDebug:true,oStyle:{borderSelect:'#FFCC00',}})//事件回调绑定this.player.JS_SetWindowControlCallback({windowEventSelect:function(iWndIndex){//插件选中窗口回调console.log('windowSelectcallback:',iWndIndex);},pluginErrorHandler:function(iWndIndex,iErrorCode,oError){//插件错误回调console.log('pluginErrorcallback:',iWndIndex,iErrorCode,oError);},windowEventOver:function(iWndIndex){//鼠标悬停回调//console.log(iWndIndex);},windowEventOut:function(iWndIndex){//鼠标移出回调//console.log(iWndIndex);},windowEventUp:function(iWndIndex){//鼠标鼠标弹起事件回调//console.log(iWndIndex);},windowFullCcreenChange:function(bFull){//全屏切换回调console.log('fullScreencallback:',bFull);},firstFrameDisplay:function(iWndIndex,iWidth,iHeight){//首帧显示回调console.log('firstFrameloadedcallback:',iWndIndex,iWidth,iHeight);},performanceLack:function(){//性能回调不足console.log('performanceLackcallback:');}});},arrangeWindow(){constsplitNum=this.splitNumthis.player.JS_ArrangeWindow(splitNum).then(()=>{console.log(`arrangeWindowto${splitNum}x${splitNum}success`)},e=>{console.error(e)})},//初始化结束//视频预览realplay(playURL,index1){this.mode=1//解码方式:0普通模式1高级模式const{player,mode,网址}=this,index=player.currentWindowIndex//playURL=this.realplayplayer.JS_Play(playURL,{playURL,mode},index1).then(()=>{console.log('realplaysuccess')},e=>{console.error(e)})},//关闭所有视频stopAllPlay(){this.player.JS_StopRealPlayAll().then(()=>{this.playback.rate=0console.log('stopAllPlaysuccess')this.closeVideoTree()},e=>{console.error(e)})},//关闭单个视频stopPlay(){this.player.JS_Stop().then(()=>{this.playback.rate=0console.log('stoprealplaysuccess')//this.closeVideoTree()constindex=this.player.currentWindowIndexthis.selectAisle(this.videoList[index],index)},e=>{console.error(e)})}}，简单预览视频，关闭视频，注意：如果不能播放视频，需要检查是否是高级模式预览视频，this.mode=1//Decoding方法：0普通模式1高级模式更新：插件版本升级后，可以硬编码，mode也可以设置为0，性能会更好注意：如果找不到静态资源文件，请确认szBasePath值是否对应静态资源地址