海康视频播放，包含h5和web插件

自行下载
海康开放平台

demo 都写得很清楚，不多描述
注意，两者需要的数据不一样，web是需要第三方标识，下载安装插件到电脑，要配置海康数据。h5是视频流，只需传接口返回的流地址

1.视频web插件

ps: 逆天插件，层级非常高，打开弹窗都会被挡住，需要做限制

vue2写法，公共vue文件写法，调用文件即可

开始时需要以下配置，不知道的找对接平台数据的人，必须要，否则播不了

getParameterData: {
    port: 443,
    ip: "10.10.2.22",
    appKey: "20224202",
    appSecret: "ndqXXXXXt1jHY2r8Uy",
    enableHTTPS: 1,
}, //海康数据

// 注意版本不一样，加载插件的声明不一样，下面vue3的是最新的，声明实例new WebControl切换下

<!-- 海康插件组件 --><template><divclass="video-center"ref="videoCenter"><div:id="playWnd"class="playWnd"></div></div></template><script>const control =require("../video/jsWebControl-1.0.0.min.js");const jsencrypt =require("../video/jsencrypt.min.js");exportdefault{data(){return{oWebControl:null,pubKey:"",initCount:0,w:0,h:0,winId:1,};},props:{playWnd:{type: String,default:'playWnd',},//播放类型  0预览 1回放playMode:{type: Number,default:0,},//初始化数据initData:{type: Object,default(){return{enableHttps:1,encryptedFields:"secret",layout:"1x1",btIds:"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769",showSmart:1,showToolbar:1,snapDir:"D:\\SnapDir",videoDir:"D:\\VideoDir",};},},},created:function(){this.initPlugin();},mounted:function(){this.$nextTick(()=>{this.h =this.$refs["videoCenter"].clientHeight;this.w =this.$refs["videoCenter"].clientWidth;})
        window.addEventListener("resize",()=>{if(this.$refs["videoCenter"]){this.h =this.$refs["videoCenter"].clientHeight;this.w =this.$refs["videoCenter"].clientWidth;this.resetFun();}});},computed:{},methods:{// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口setWndCover(){var iWidth = window.width;var iHeight = window.height;var oDivRect = document
                .querySelector("#"+this.playWnd).getBoundingClientRect();var iCoverLeft = oDivRect.left <0? Math.abs(oDivRect.left):0;var iCoverTop = oDivRect.top <0? Math.abs(oDivRect.top):0;var iCoverRight =
                oDivRect.right - iWidth >0? Math.round(oDivRect.right - iWidth):0;var iCoverBottom =
                oDivRect.bottom - iHeight >0? Math.round(oDivRect.bottom - iHeight):0;

            iCoverLeft = iCoverLeft >this.w ?this.w : iCoverLeft;
            iCoverTop = iCoverTop >this.h ?this.h : iCoverTop;
            iCoverRight = iCoverRight >this.w ?this.w : iCoverRight;
            iCoverBottom = iCoverBottom >this.h ?this.h : iCoverBottom;this.oWebControl.JS_RepairPartWindow(0,0,this.w +1,this.h);// 多1个像素点防止还原后边界缺失一个像素条if(iCoverLeft !=0){this.oWebControl.JS_CuttingPartWindow(0,0, iCoverLeft,this.h);}if(iCoverTop !=0){this.oWebControl.JS_CuttingPartWindow(0,0,this.w +1,
                    iCoverTop
                );// 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if(iCoverRight !=0){this.oWebControl.JS_CuttingPartWindow(this.w - iCoverRight,0,
                    iCoverRight,this.h
                );}if(iCoverBottom !=0){this.oWebControl.JS_CuttingPartWindow(0,this.h - iCoverBottom,this.w,
                    iCoverBottom
                );}},// 初始化init(){this.getPubKey(()=>{let{ appSecret,...hkData }=this.$store.state.getParameterData;//海康提供的认证信息this.oWebControl.JS_RequestInterface({funcName:"init",argument:JSON.stringify({appkey: hkData.appKey,//API网关提供的appkeysecret:this.setEncrypt(appSecret),//API网关提供的secretip: hkData.ip,//API网关IP地址playMode:this.playMode,//播放模式（决定显示预览还是回放界面）port: hkData.port,//端口snapDir:this.initData.snapDir,//抓图存储路径videoDir:this.initData.videoDir,//紧急录像或录像剪辑存储路径layout:this.initData.layout,//布局enableHTTPS: hkData.enableHTTPS,//是否启用HTTPS协议encryptedFields:this.initData.encryptedFields,//加密字段showToolbar:this.initData.showToolbar,//是否显示工具栏showSmart:this.initData.showSmart,//是否显示智能信息})}).then((oData)=>{// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题this.oWebControl.JS_Resize(this.w,this.h);});});},/* 视频预览业务功能 */startPreviewFun(val){this.oWebControl.JS_RequestInterface({funcName:"startPreview",argument:JSON.stringify({cameraIndexCode: val,streamMode:0,transMode:1,gpuMode:0,wndId:this.winId,}),}).then((oData)=>{
                console.log('播放成功',oData)});},/* 视频回放业务功能 */startPlaybackFun(val, start, end, streamMode =1){this.oWebControl.JS_RequestInterface({funcName:"startPlayback",argument:JSON.stringify({cameraIndexCode: val,//监控点编号startTimeStamp: start,//录像查询开始时间戳，单位：秒endTimeStamp: end,//录像结束开始时间戳，单位：秒streamMode: streamMode,//主子码流标识：0-主码流，1-子码流recordLocation:0,//录像存储类型：0-中心存储，1-设备存储transMode:1,//传输协议：0-UDP，1-TCPgpuMode:0,//是否启用GPU硬解，0-不启用，1-启用wndId:this.wndId                                     //可指定播放窗口})}).then((oData)=>{
                console.log('回放',oData)});},// RSA加密setEncrypt(value){var encrypt =newjsencrypt.JSEncrypt();
            encrypt.setPublicKey(this.pubKey);return encrypt.encrypt(value);},// 推送消息cbIntegrationCallBack(oData){// 窗口选中if(oData.responseMsg.type ===1){this.winId = oData.responseMsg.msg.wndId
            }},// 设置窗口控制回调setCallbacks(){this.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack:this.cbIntegrationCallBack,});},/* 获取公钥 */getPubKey(callback){this.oWebControl.JS_RequestInterface({funcName:"getRSAPubKey",argument:JSON.stringify({keyLength:1024,}),}).then((oData)=>{if(oData.responseMsg.data){this.pubKey = oData.responseMsg.data;callback();}});},// 加载插件initPlugin(){let _this =this;this.oWebControl =newcontrol.WebControl({szPluginContainer:this.playWnd,iServicePortStart:15900,iServicePortEnd:15909,szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",// 用于IE10使用ActiveX的clsidcbConnectSuccess:function(){
                    _this.setCallbacks();
                    _this.oWebControl
                        .JS_StartService("window",{dllPath:"./VideoPluginConnect.dll"}).then(()=>{
                            _this.oWebControl.JS_CreateWnd(_this.playWnd, _this.w, _this.h).then(()=>{
                                _this.init();});},function(){});},cbConnectError:function(){
                    _this.oWebControl =null;
                    initCount ++;if(initCount <3){setTimeout(function(){initPlugin();},3000)}else{
                        console.log('插件启动失败，请检查插件是否安装！')}},cbConnectClose:function(bNormalClose){
                    console.log("cbConnectClose");
                    _this.oWebControl =null;},});},// 重置窗口大小resetFun(){if(this.oWebControl !=null){this.oWebControl.JS_Resize(this.w,this.h);this.setWndCover();}},},destroyed(){this.oWebControl.JS_HideWnd();this.oWebControl.JS_DestroyWnd().then(function(){
                console.log("销毁插件窗口成功");},function(){
                console.log("销毁插件窗口失败");});},};</script><stylescoped="scoped">.video-center{width: 100%;height: 100%;}</style>

不完整，自行补充

<template><PreviewVideoref="webVideo":playMode="0":initData="initData"/></template><script>exportdefault{data(){return{initData:{enableHttps:0,encryptedFields:"secret",layout:"2x2",// 4个窗口showSmart:1,showToolbar:1,snapDir:"D:SnapDir",videoDir:"D:VideoDir",},}},method(){//播放时调用videoPlayFun(){//预览//第三方标识，由海康提供，后端传回this.$refs['webVideo'].startPreviewFun(data.deviceNameEn)//回放，需要回放时间，若使用element的时间戳，需要/1000，变为秒单位//playMode传1this.$refs['webVideo'].startPlaybackFun(
            data.deviceNameEn,
            startTime,
            endTime
         )}}}</script>

vue3+vite

使用版本

index文件引入

playVideo传第三方标识，请自行修改以下变量值如上
可直接复制使用vue，点击播放
能直接使用，测试如下，可测试第三方标识能否使用

<template><divclass="video-center"ref="videoCenter"><div@click="playVideo('1005ede4f95a4447897b8fd1fa8cd6f7', 1)">"1005ede4f95a4447897b8fd1fa8cd6f7"</div><div@click="playVideo('933d67747cb248ba93e0a65b5ac751ac', 2)">"933d67747cb248ba93e0a65b5ac751ac"</div><div@click="playVideo('e77fa1c7d9f04c9b893a74d441d5a53b', 3)">"e77fa1c7d9f04c9b893a74d441d5a53b"</div><divid="playWnd"class="playWnd"></div></div></template><scriptsetuplang="ts">import{ onMounted, ref, reactive, unref }from'vue'var initCount =0;var oWebControl =nullvar pubKey ='';// 创建播放实例constinitPlugin=()=>{
      oWebControl =newWebControl({szPluginContainer:"playWnd",// 指定容器idiServicePortStart:15900,// 指定起止端口号，建议使用该值iServicePortEnd:15900,szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",// 用于IE10使用ActiveX的clsidcbConnectSuccess:function(){// 创建WebControl实例成功                                            
                oWebControl.JS_StartService("window",{// WebControl实例创建成功后需要启动服务dllPath:"./VideoPluginConnect.dll"// 值"./VideoPluginConnect.dll"写死 }).then(function(){// 启动插件服务成功
                    oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: cbIntegrationCallBack
                    });
                    
                    oWebControl.JS_CreateWnd("playWnd",1000,600).then(function(){//JS_CreateWnd创建视频播放窗口，宽高可设定init();// 创建播放实例成功后初始化});},function(){// 启动插件服务失败});},cbConnectError:function(){// 创建WebControl实例失败
                oWebControl =null;
                WebControl.JS_WakeUp("VideoWebPlugin://");// 程序未启动时执行error函数，采用wakeup来启动程序
                initCount ++;if(initCount <3){setTimeout(function(){initPlugin();},3000)}else{
          console.log('插件启动失败，请检查插件是否安装！')// $("#playWnd").html("插件启动失败，请检查插件是否安装！");}},cbConnectClose:function(bNormalClose){// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = true    
                console.log("cbConnectClose");
                oWebControl =null;
        console.log('插件未启动，正在尝试启动，请稍候...')// $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                WebControl.JS_WakeUp("VideoWebPlugin://");
                initCount ++;if(initCount <3){setTimeout(function(){initPlugin();},3000)}else{
          console.log('插件启动失败，请检查插件是否安装！')// $("#playWnd").html("插件启动失败，请检查插件是否安装！");}}});}// 推送消息constcbIntegrationCallBack=(oData)=>{
  console.log(JSON.stringify(oData.responseMsg))}constinit=()=>{getPubKey(function(){// 请自行修改以下变量值            var appkey ="20224202";//综合安防管理平台提供的appkey，必填var secret =setEncrypt("xxxCAFyke4t1jHY2r8Uy");//综合安防管理平台提供的secret，必填var ip ="10.10.11.12";//综合安防管理平台IP地址，必填var playMode =0;//初始播放模式：0-预览，1-回放var port =443;//综合安防管理平台端口，若启用HTTPS协议，默认443var snapDir ="D:\\SnapDir";//抓图存储路径var videoDir ="D:\\VideoDir";//紧急录像或录像剪辑存储路径var layout ="2x2";//playMode指定模式的布局var enableHTTPS =1;//是否启用HTTPS协议与综合安防管理平台交互，这里总是填1var encryptedFields ='secret';//加密字段，默认加密领域为secretvar showToolbar =1;//是否显示工具栏，0-不显示，非0-显示var showSmart =1;//是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示var buttonIDs ="0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";//自定义工具条按钮// 请自行修改以上变量值    

        oWebControl.JS_RequestInterface({funcName:"init",argument:JSON.stringify({appkey: appkey,//API网关提供的appkeysecret: secret,//API网关提供的secretip: ip,//API网关IP地址playMode: playMode,//播放模式（决定显示预览还是回放界面）port: port,//端口snapDir: snapDir,//抓图存储路径videoDir: videoDir,//紧急录像或录像剪辑存储路径layout: layout,//布局enableHTTPS: enableHTTPS,//是否启用HTTPS协议encryptedFields: encryptedFields,//加密字段showToolbar: showToolbar,//是否显示工具栏showSmart: showSmart,//是否显示智能信息buttonIDs: buttonIDs                       //自定义工具条按钮})}).then(function(oData){
    oWebControl.JS_Resize(1000,600);// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题});});}//获取公钥constgetPubKey=(callback)=>{
    oWebControl.JS_RequestInterface({funcName:"getRSAPubKey",argument:JSON.stringify({keyLength:1024})}).then(function(oData){
        console.log(oData);if(oData.responseMsg.data){
            pubKey = oData.responseMsg.data;callback()}})}//RSA加密constsetEncrypt=(value)=>{var encrypt =newJSEncrypt();
      encrypt.setPublicKey(pubKey);return encrypt.encrypt(value);}onMounted(()=>{initPlugin()
  window.addEventListener('unload',()=>{if(oWebControl !=null){
      oWebControl.JS_HideWnd();}})
  window.addEventListener('resize',()=>{if(oWebControl !=null){
        oWebControl.JS_Resize(1000,600);setWndCover();}})
  window.addEventListener('scroll',()=>{if(oWebControl !=null){
        oWebControl.JS_Resize(1000,600);setWndCover();}})})constsetWndCover=()=>{var iWidth = window.innerWidth;var iHeight = window.innerHeight;var oDivRect = document.querySelector("#playWnd").getBoundingClientRect();
    console.log('oDivRect', oDivRect)var iCoverLeft =(oDivRect.left <0)? Math.abs(oDivRect.left):0;var iCoverTop =(oDivRect.top <0)? Math.abs(oDivRect.top):0;var iCoverRight =(oDivRect.right - iWidth >0)? Math.round(oDivRect.right - iWidth):0;var iCoverBottom =(oDivRect.bottom - iHeight >0)? Math.round(oDivRect.bottom - iHeight):0;

      iCoverLeft =(iCoverLeft >1000)?1000: iCoverLeft;
      iCoverTop =(iCoverTop >600)?600: iCoverTop;
      iCoverRight =(iCoverRight >1000)?1000: iCoverRight;
      iCoverBottom =(iCoverBottom >600)?600: iCoverBottom;

  oWebControl.JS_RepairPartWindow(0,0,1001,600);// 多1个像素点防止还原后边界缺失一个像素条if(iCoverLeft !=0){
    oWebControl.JS_CuttingPartWindow(0,0, iCoverLeft,600);}if(iCoverTop !=0){
          oWebControl.JS_CuttingPartWindow(0,0,1001, iCoverTop);// 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if(iCoverRight !=0){
          oWebControl.JS_CuttingPartWindow(1000- iCoverRight,0, iCoverRight,600);}if(iCoverBottom !=0){
          oWebControl.JS_CuttingPartWindow(0,600- iCoverBottom,1000, iCoverBottom);}}constplayVideo=(val:string, i)=>{
  oWebControl.JS_RequestInterface({funcName:"startPreview",argument:JSON.stringify({cameraIndexCode:val,//监控点编号streamMode:0,//主子码流标识transMode:1,//传输协议gpuMode:0,//是否开启GPU硬解wndId:  i                                    //可指定播放窗口})})}</script><style>.playWnd{width: 1000px;/*播放容器的宽和高设定*/height: 600px;border: 1px solid red;}</style>

2.H5视频播放器

vue3写法，将下载的文件复制到public下
在index.html 引入

<scriptsrc="/js/h5player.min.js"></script>

<!-- 海康插件 --><template><div:id="props.playId"class="w-full"></div></template><scriptsetuplang="ts">const message =useMessage()// 消息弹窗const props =defineProps({playId:{require:true,type: String,default:()=>{return'player'}}})const player =ref()onMounted(()=>{initPlayer()// 设置播放容器的宽高并监听窗口大小变化
  window.addEventListener('resize',()=>{
    player.value.JS_Resize()})})const emit =defineEmits(['error'])constinitPlayer=()=>{// @ts-ignore
  player.value =newJSPlugin({szId: props.playId,szBasePath:'/js',//public下命名的文件名bSupporDoubleClickFull:true,// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高// iWidth: props.iWidth,// iHeight: props.iHeight,// 分屏播放，默认最大分屏4*4iMaxSplit:4,iCurrentSplit:1})// 事件回调绑定
  player.value.JS_SetWindowControlCallback({//插件选中窗口回调windowEventSelect:(iWndIndex)=>{
      console.log('windowSelect callback: ', iWndIndex)
      wndIndex.value = iWndIndex
    },// @ts-ignore 取流失败，流中断等错误都会触发该回调函数pluginErrorHandler:(index, iErrorCode, oError)=>{// 取流失败if(iErrorCode ==='0x12f910011')emit('error')}})}const wndIndex =ref(0)constcreatePlayer=(url: string, i = wndIndex.value)=>{
  console.log('视频流地址:', url, props.playId)if(!url)return
  player.value.JS_Play(url,{playURL: url,mode:0}, i).then(()=>{
      console.log('play success=============')},(err)=>{// message.warning('播放失败！')
      console.info('JS_Play failed:', err)})}// 分屏constsplitPlayer=(num)=>{if(num ===1) wndIndex.value =0
  player.value.JS_ArrangeWindow(num)}// 全屏constfullScreen=(isFull)=>{
  player.value.JS_FullScreenDisplay(isFull)}// 回放constreplayFun=(data)=>{
    player.value
    .JS_Play(data.url,{playURL: data.url,mode:0},0, data.startTime, data.endTime).then(()=>{
         console.log('playbackStart success')},(err)=>{
         console.info('JS_Play failed:', err)})}// 设置窗口大小constresizeFun=(iWidth, iHeight)=>{
  player.value.JS_Resize(iWidth, iHeight)}conststopAllPlay=()=>{
  player.value.JS_StopRealPlayAll().then(()=>{
    console.info('JS_StopRealPlayAll success')})}const playerFun ={
  createPlayer,
  splitPlayer,
  fullScreen,
  replayFun,
  resizeFun,
  stopAllPlay
}defineExpose({ playerFun })</script>

不完整，自行补充

<playerclass="w-full h-400px"ref="playRef"/>

这是我本地的地址，需要后端返回类似的
ws和hls都试过可以播放，ws基本没延迟，优先使用

 unref(playRef).playerFun.createPlayer(item, index)
 
 回放时间格式要转为 format('YYYY-MM-DDTHH:mm:ss.SSSZ')
 unref(playRef).playerFun.replayFun({ ... })