海康威视平台播放Web端解决遮挡问题

海康威视平台Web端播放时，播放画面会始终置顶，遮挡其他界面

问题提出

海康威视平台Web端播放时，播放画面会显示到其他界面,如图所示。

需要解决问题：切换到其他页面时，视频不会遮挡当前功能页面。

问题分析

海康官方文档解释：插件窗口创建后，会始终置顶，因此当和其它组件一同使用时，会遮挡其它组件内容。

解决方案

1.监听当前页面路由是否进行变化，根据路由将海康播放视频界面隐藏和显示。下面代码式JS中使用监听

  watch: {
    $route(to, from) {
      console.log(from.path); //从哪来
      console.log(to.path); //到哪去
      if (to.path == '/j-k/j-k001') {
        //监听路由恢复海康播放视频的窗口
        this.oWebControl.JS_ShowWnd();
        // this.oWebControl.JS_RepairPartWindow(0, 0, 1000, 1000); //扣除部分插件窗口接口
      }
      if (from.path == '/j-k/j-k001') {
        //监听路由隐藏海康播放视频的窗口
        this.oWebControl.JS_HideWnd();
        // this.oWebControl.JS_CuttingPartWindow(0, 0, 1000, 1000);//扣除插件窗口还原接口
      }
    },
  },

拓展应用

1.当在海康播放页面有弹框时，同样会出现视频遮弹框情况，相同的解决思路，需要出现弹框交互时隐藏视频播放界面或扣除部分插件窗口，当弹框业务处理好后恢复播放界面或还原扣除部分。

接口文档如下：