免费视频直播、点播H5播放器SkeyeWebPlayer多屏（九宫格）、双击分屏放大缩小、拖动（拖入分屏播放）等功能的使用。

1.SkeyeWebPlayer多屏（九宫格）布局切换，一般采用1、4、9、16、25、36屏等分屏布局

点击分屏按钮进行屏幕分割，下拉更多选择分屏方式可以切换

2.分屏双击分屏放大缩小

在分屏区域内双击可放大整个区域，再双击可还原分屏。

--vue--
<div class="grid-col__border"
       ref="gridCol"
       :class="[{active:playerIndex===index}]"
       @click.stop="playerIndex = index"
       @dblclick.stop="dbClickHandler($event,index)"
       @mouseup.prevent="onMouseup($event,index)">
    <!--播放器组件-->
    <VSLivePlayer
      v-if="item.cameraId"
      :key="item.cameraId"
      :item="item"
      :index="index"
      @closeStream="closeChannel(index)">
    </VSLivePlayer>
  </div>

--js--
// 双击放大缩小
dbClickHandler(e, index) {
  if (this.isDoubleClick) {
    this.isDoubleClick = false
    this.$refs.gridCol[index].style.position = ''
    this.$refs.gridCol[index].style.top = ''
    this.$refs.gridCol[index].style.left = ''
    this.$refs.gridCol[index].style.height = ''
    this.$refs.gridCol[index].style.width = ''
    this.$refs.gridCol[index].style.backgroundColor = ''
    this.$refs.gridCol[index].style.zIndex = ''
  } else {
    this.isDoubleClick = true
    this.$refs.gridCol[index].style.position = 'absolute'
    this.$refs.gridCol[index].style.top = '0'
    this.$refs.gridCol[index].style.left = '0'
    this.$refs.gridCol[index].style.height = '100%'
    this.$refs.gridCol[index].style.width = '100%'
    this.$refs.gridCol[index].style.backgroundColor = '#000'
    this.$refs.gridCol[index].style.zIndex = 10
  }
},

在全屏模式下也可以双击放大,在全屏模式下双击放大时单个分屏全屏显示，如图：

在全屏模式下也可以双击放大,在全屏模式下双击缩小时显示分屏，如图：

3.拖动（拖入分屏）播放监控视频

从左侧树列表中点击拖动监控点到右侧分屏区域可直接进行视频播放，而点击时需要先选中分屏才能指定到某个分屏中播放，拖动相比点击时要方便的多，用户可自行随意拖入到分屏。

左侧树组件参考 element-ui el-tree

自定义拖动事件

--vue--
<el-tree
  ref="tree"
  :data="data"
  :show-checkbox="showCheckbox"
  node-key="id"
  check-strictly
  :props="props"
  highlight-current
  :default-expanded-keys="defaultExpandedKeys"
  :current-node-key="currentNodeKey"
  :indent="indent"
  :lazy="lazy"
  :load="load"
  :expand-on-click-node="expandOnClickNode"
  @node-click="nodeClick"
  @check="changetree"
  @check-change="handleNodeClick"
  @node-expand="nodeExpand">
  <div class="custom-tree-node"
       slot-scope="{node, data}">
    <span class="img-box" v-if="data.iconImg">
      <img :src="data.iconImg" class="custom-tree-img-icon" alt="">
    </span>
    <!-- 名称 -->
    <span class="name"
          @mousedown="onMousedown(node)"
    >{{ node.label }}</span>
  </div>
</el-tree>

--js--
onMousedown(node) {
  if (node.data.drag) {
    let dom = document.createElement('div')
    dom.innerText = node.data.name
    dom.style.display = 'none'
    dom.classList.add('drag-div-box')
    document.body.appendChild(dom)
    let moveFlag = false
    document.onmousemove = (e) => {
      if (!moveFlag) {
        this.$emit('drag-start', node)
        moveFlag = true
      }
      dom.style.position = 'absolute'
      dom.style.left = e.clientX + 3 + 'px'
      dom.style.top = e.clientY + 3 + 'px'
      dom.style.zIndex = 1000
      dom.style.display = 'block'
      dom.style.backgroundColor = '#c9e9f7'
      dom.style.color = '#333'
      dom.style.padding = '5px 5px'
      dom.style.fontSize = '16px'
      dom.style.lineHeight = '1'
      dom.style.borderRadius = '4px'
    }
    // 鼠标已经抬起
    document.onmouseup = (e) => {
      if (moveFlag) {
        this.$emit('drag-end', node)
      }
      document.body.removeChild(dom)
      document.onmousemove = null;// 当鼠标弹起时移出移动事件
      document.onmouseup = null;// 移出up事件，清空内存
    }
  }
},

关于SkeyeVSS

SkeyeVSS是一款基于Web网页H5无插件直播点播的视频云融合管理系统:

• 支持 WEB 页面配置管理;

• 支持组织机构管理;

• 支持设备或平台通过GB/T28181协议接入;

• 支持IPC、NVR通过Onvif协议接入;

• 支持IPC、NVR通过RTSP协议接入;

• 支持设备状态管理, 可实时查看设备在线状态;

• 支持标准的RTSP协议输出;

• 支持基于WebSocket的RTSP协议输出;

• 支持全平台（PC/Android/iOS/微信/H5）观看;

• 支持 WebRTC、RTMP、HLS、HTTP-FLV、Websocket-FLV、RTSP 、Websocket-RTSP分发

• 支持网页端H5无插件播放、回放;

• 支持多分屏多路同时实时播放;

• 支持多分屏多路同时录像回放;

• 支持H264、H265视频解码播放;

• 支持云台控制，焦距缩放、预置点控制;

• 支持设备端录像、查询、回放;

• 支持服务端录像计划、时段查询和检索回放;

• 支持服务端录像自定义时段下载;

• 支持报警管理;

• 支持电子地图;

• 支持电视墙上墙管理；

• 支持GB/T28181国标协议级联;

• 支持用户管理，权限验证，播放鉴权;

• 支持Windows & Linux（ARM/国产操作系统）部署;

SkeyeVSS综合安防视频云服务， 提供一站式私有化部署视频安防综合管理系统解决方案。SkeyeVSS秉持网络化、集成化、智能化的理念，采用先进的软硬件开发技术，解决了综合安防系统集中管理、多级联网、信息共享、互联互通、多业务融合等问题。

SkeyeVSS其独创的ws-rtsp流媒体直播技术，兼容传统安防流媒体的同时，不需要安装浏览器插件，解决互联网接入安防监控延迟高、起播慢等问题；支持全平台终端H5直播点播（PC、Web、Android、iOS）。

详细说明：http://www.openskeye.cn/web/product/vss

获取更多信息

邮件：support@openskeye.cn

SkeyeVSS综合安防互联网无插件播放解决方案

SkeyeARS全景AR增强监视系统解决方案

SkeyeIVMS集群式视频云管控平台解决方案

Copyright © OpenSkeye Team 2018-2022