关于html5:免费视频直播点播H5播放器SkeyeWebPlayer多屏九宫格双击分屏放大缩小拖动拖入分屏播放等功能的使用

免费视频直播、点播 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）。