一种基于动态SHIM的视频拖拽点播方案

刘峰+徐川+金晋+牛毅

摘  要： 在此阐述了B/S架构的可视化系统中拖拽点播功能的实现方案。针对拖拽点播中播放控件遮蔽页面元素和窗口无法定位的问题，给出了基于SHIM技术的解决方法。通过动态SHIM技术，对拖拽DOM节点进行处理，对zTree树形组件进行改进，解决了ActiveX播放控件遮蔽页面元素的问题。同时，设计了基于SHIM位置的动态偏移算法，解决了播放窗口无法定位的问题。该方案为Web项目中拖拽问题提供了有效的解决思路，提升了用户体验。

关键词： 拖拽; ActiveX; SHIM; zTree

中图分类号： TN964?34                   文献标识码： A                            文章编号： 1004?373X（2014）24?0009?03

A solution of video on demand by drag and drop based on dynamic SHIM

LIU Feng1， XU Chuan1， JIN Jin2， NIU Yi1

（1.The First Research Institute of the Ministry of Public Security of P.R.C， Beijing 100048， China;  2.People′s Public Security University of China， Beijing 100038， China）

Abstract： The implementation solution of video on demand by drag and drop in a visualization system of B/S structure is elaborated in this paper. Aiming at the problems that page elements is shaded by the player control and the window can not be located， a solution based on SHIM is provided in this paper. According to dynamic SHIM technology， the DOM nodes are disposed by drag and drop， the zTree subassembly is improved， and the problem that page elements is shaded by the ActiveX is solved. A SHIM dynamic offset algorithm was designed， and the window location problem was solved. This method provides an effective solution on drag and drop problem existing in Web project， and enhances the user experience.

Keywords： drag and drop; ActiveX; SHIM; zTree

0  引  言

随着全国社会视频监控建设的不断深入推进，贴近社会管理实战的视频监控业务应用越来越受到重视。可视化指挥调度系统是集视频资源快速组织、解码上屏、电子巡逻、社会面管控和重大突发事件指挥调度等功能于一体的综合业务应用系统[1?3]。为了进一步增强该系统的快速反应指挥能力，提升用户体验，通过拖拽设备树节点到视频播放器窗口，实现视频拖拽点播功能。但是，在拖拽过程中，基于ActiveX[4]的视频播放器控件[5?7]界面会遮蔽所拖拽的设备树节点，同时在响应拖拽事件时不能定位播放器窗口位置，进而导致拖拽点播功能无法实现。

为了解决上述问题，引入了SHIM技术原理[8]，对zTree树形组件进行改进，为树节点元素实现SHIM动态切片效果，使其在拖动过程中不再被播放器控件所遮蔽。同时，使用基于动态SHIM的位置偏移算法，实现了拖放点播窗口的动态定位。

1  视频拖拽点播功能和组件

鼠标拖拽功能的实现需要拖拽源和拖拽目的地的密切配合。可视化视频指挥系统中的拖拽源是设备树节点，拖拽目的地是视频播放器窗口，通过二者的交互实现系统的拖拽点播功能。

1.1  视频拖拽点播功能

在可视化指挥调度系统中，为了提升用户操作体验，往往要求实现拖拽点播功能，即鼠标在设备树的设备节点上按下后，移动鼠标到播放器窗口上，松开鼠标，实现点中设备在特定播放窗口上的视频点播。

拖拽分为直接拖拽和复制拖拽两种。

直接拖拽：即用户在拖拽的过程中，拖拽的目标就是相应的对象，当用户触发对象的拖拽事件时，对象会跟随鼠标移动。在整个鼠标移动的过程中，拖拽对象改变的仅是其显示位置，而整个页面的响应代码将会改变拖拽对象的CSS信息[9]或者改变拖拽对象的父标签，页面代码不会增加新的HTML标签元素。

复制拖拽，即用户在拖拽的过程中，当用户点击触发对象的拖拽事件的瞬间，页面生成了一个与对象具有相同意义的对象跟随着鼠标的移动。在复制拖拽的过程中，生成对象的CSS信息会随着鼠标的移动产生变化，原来对象的CSS信息没有任何变化，并且在拖拽事件被触发的瞬间，Web页面的DOM[10]树会增加新的DOM标签元素。

由于直接拖拽会改变设备树原有的组织结构，一方面不符合用户操作习惯，另一方面会引起树结构的重新渲染，增加系统开销，故系统视频拖拽点播功能采用了复制拖拽方式。

1.2  zTree树形组件

zTree是一个基于 JQuery 框架实现的Web客户端多功能树形结构轻量级开源组件，兼容多种浏览器，具有灵活的节点编辑（增/删/改/查）功能，能够实现节点拖拽，同时性能优异，可扩展性强，将其应用在系统平台中，作为设备资源的组织载体，成为了广大开发者的首选。

1.3  基于ActiceX的播放器控件

视频播放器控件基于ActiveX技术开发，可以通过Object标签嵌入Web页面，提供JavaScript调用接口，支持视频的解码播放。

Web页面中DOM元素显示的堆叠次序可以通过z?index属性控制，而视频播放器控件无此属性。当视频播放器控件与DOM元素在同一区域叠加显示时，视频播放器界面会将Web界面中其他的DOM元素遮挡，如图1所示。所以，当进行视频拖拽点播时，拖拽节点将会被视频播放器界面遮蔽。

图1 Web页面中播放器堆叠示意图

2  引入动态SHIM的拖拽点播

本文引入SHIM技术，对zTree组件进行改进，解决了播放器组件遮蔽拖拽对象问题。同时采用基于SHIM的位置的动态偏移算法，解决了播放窗口定位的问题。

2.1  SHIM技术原理

SHIM技术是一种切片技术，它的原理是在被遮蔽的对象下面放一层隐形的薄片，同时薄片漂浮在遮蔽对象之上。如图2所示。

2.2  使用动态SHIM改进zTree

在Web页面中，zTree组件的树节点元素拖拽到视频播放器控件范围内时会被控件遮蔽，同时其鼠标焦点也被视频播放器控件抢占，导致DOM定义的UP事件无法响应。因此，需要找到一个能够漂浮在视频播放器控件上方的DOM元素来解决此问题。

<＼＼192.168.6.11＼现代电子技术14年37卷第24期＼Image＼34t2.tif>

图2 SHIM技术原理示意图

通过研究DOM标签元素，发现只有iframe标签元素与视频播放器控件放在同一区域时可以浮在视频播放器之上。通过动态连续改变iframe标签元素的位置信息属性，对于视频播放器控件而言，整个iframe标签元素类似于浮动面板，故采用iframe标签元素作为动态SHIM。

在拖拽过程中，SHIM切片跟随鼠标不断移动，形成连续的动态效果，其形状大小也随拖拽对象大小变化而变化，避免了因每一次拖拽对象的大小存在差异而造成SHIM切片过大或过小，进而遮蔽其他组件或者遮蔽不足等问题的出现。动态SHIM部分实现的伪代码如下所示：

If start dragging then

for（; end dragging;）

{

If shim does not exist then

create shim

end if

if moveNode does not exist then

create moveNode

end if

get the size of moveNode

change the size of shim to keep the moveNode at the same size

get the current position of the mouse

change the position of shim and moveNode

change the level of shim and moveNode to make the move

Node on the shim

}

destroy the shim and moveNode

end if

其中：moveNode为拖拽过程中跟随鼠标移动的对象;shim为相应的动态切片对象。

zTree组件在拖放结束时，需要销毁组件生成的DOM节点与新增的SHIM切片，否则会导致客户端内存泄露和响应变慢。为了不破坏zTree组件原来的内部实现结构，本文在对zTree组件进行改进时，仍然采用在树节点拖拽事件开始时，为所有的DOM元素增加UP事件来销毁DOM节点和SHIM切片的方法。

2.3  基于动态SHIM的位置偏移算法

在B/S架构的浏览器客户端实现拖拽点播功能，本质上是通过页面SHIM切片跟随鼠标移动，在用户松开鼠标时，计算SHIM切片的坐标位置，使用位置偏移算法，计算出视频播放器的窗口号，实现在该窗口的视频点播。

本文设计了基于动态SHIM的位置偏移算法，来实现上述过程。公式如下：

[ighWi=scrWi-rigWi-lefWidivScreen]    （1）

[sigHi=scrHi-topHi-botHidivScreen，                  客户端模式scrHi-topHi-botHi-walHidivScreen ，    混合模式] （2）

[fx，y=x-rigWisigWi+y-topHisigHi-1divScreen] （3）

式中：[fx，y]为计算出的窗口号;x为拖拽结束时SHIM所在Web页面的横坐标;y为纵坐标;scrWi为显示屏Web页面的宽度;rigWi为Web页面右方组件宽度;lefWi为左方组件的宽度;scrHi为Web页面的高度;walHi为当前Web页面顶部组件的高度;botHi为底部组件的高度;walHi混合模式下模拟墙的高度;diwScreen为当前播放器的分屏情况，取值为1，4，9，16;为当前分屏情况下单屏的宽度;sigHi为单屏的高度。

当拖拽操作完成时，此时SHIM切片漂浮在播放器界面上，可根据获取到的位置，通过式（3）计算相应的窗口号。

2.4  引入动态SHIM的拖拽点播流程

基于动态SHIM的拖拽点播具体流程，如图3所示。

3  结  语

本文分析了可视化指挥平台系统中拖拽对象被ActiveX播放器控件遮挡的原因，阐述了SHIM切片技术原理，引入的SHIM技术对开源组件zTree进行改进，实现了动态SHIM效果，解决了播放器控件遮蔽拖拽对象的问题。通过基于动态SHIM的位置偏移算法，解决了播放窗口定位问题，实现了平台的拖拽点播功能，为类似问题的解决提供了思路。

<＼＼192.168.6.11＼现代电子技术14年37卷第24期＼Image＼34t3.tif>

图3 基于动态SHIM的拖拽点播流程

参考文献

[1] 曾宪江，何鹏，冯金锐，等.基于PGIS平台的可视化指挥调度系统的设计与实现[J].警察技术，2013（3）：12?14.

[2] 朱振华，汪宁.基于PGIS的扁平化指挥调度系统的设计与实现[J].警察技术，2014（2）：12?14.

[3] 曾宪江，何鹏，朱维和，等.创新可视化指挥调度模式，为最安全城市保驾护航[J].警察技术，2012（5）：24?26.

[4] 赖根，肖明清.基于ActiveX控件技术的测试功能封装[J].计算机工程，2006（8）：82?83.

[5] 邹羚.多流媒体播放器ActiveX控件开发[J].微型机与应用， 2010（14）：65?67.

[6] DUAN Ke?xiao， ZHAO Xiang?mo， XU Zhi?gang. A Web?based multi?video player and its application in road asset management system [J]. Journal of Transport Information and Safety， 2010， 28（4）： 133?136.

[7] 曹洁，金保召，赵宏.具有P2P功能的嵌入式流媒体播放器的设计[J].计算机工程与应用，2014（15）：87?90.

[8] 黄灯桥. Ext JS权威指南：基于Ext 4.1，全面讲解Ext开发方法、技巧与最佳实践，通过源码剖析Ext原理[M].北京：机械工业出版社，2012.

[9] 李冲，熊淑华，魏颖颖.基于CSS与JavaScript技术的Tab面板的设计与实现[J].计算机技术与发展，2011（3）：28?35.

[10] 张瑞雪，宋明秋，公衍磊.逆序解析DOM树及网页正文信息提取[J].计算机科学，2011（4）：213?215.

式中：[fx，y]为计算出的窗口号;x为拖拽结束时SHIM所在Web页面的横坐标;y为纵坐标;scrWi为显示屏Web页面的宽度;rigWi为Web页面右方组件宽度;lefWi为左方组件的宽度;scrHi为Web页面的高度;walHi为当前Web页面顶部组件的高度;botHi为底部组件的高度;walHi混合模式下模拟墙的高度;diwScreen为当前播放器的分屏情况，取值为1，4，9，16;为当前分屏情况下单屏的宽度;sigHi为单屏的高度。

当拖拽操作完成时，此时SHIM切片漂浮在播放器界面上，可根据获取到的位置，通过式（3）计算相应的窗口号。

2.4  引入动态SHIM的拖拽点播流程

基于动态SHIM的拖拽点播具体流程，如图3所示。

3  结  语

本文分析了可视化指挥平台系统中拖拽对象被ActiveX播放器控件遮挡的原因，阐述了SHIM切片技术原理，引入的SHIM技术对开源组件zTree进行改进，实现了动态SHIM效果，解决了播放器控件遮蔽拖拽对象的问题。通过基于动态SHIM的位置偏移算法，解决了播放窗口定位问题，实现了平台的拖拽点播功能，为类似问题的解决提供了思路。

<＼＼192.168.6.11＼现代电子技术14年37卷第24期＼Image＼34t3.tif>

图3 基于动态SHIM的拖拽点播流程

参考文献

[1] 曾宪江，何鹏，冯金锐，等.基于PGIS平台的可视化指挥调度系统的设计与实现[J].警察技术，2013（3）：12?14.

[2] 朱振华，汪宁.基于PGIS的扁平化指挥调度系统的设计与实现[J].警察技术，2014（2）：12?14.

[3] 曾宪江，何鹏，朱维和，等.创新可视化指挥调度模式，为最安全城市保驾护航[J].警察技术，2012（5）：24?26.

[4] 赖根，肖明清.基于ActiveX控件技术的测试功能封装[J].计算机工程，2006（8）：82?83.

[5] 邹羚.多流媒体播放器ActiveX控件开发[J].微型机与应用， 2010（14）：65?67.

[6] DUAN Ke?xiao， ZHAO Xiang?mo， XU Zhi?gang. A Web?based multi?video player and its application in road asset management system [J]. Journal of Transport Information and Safety， 2010， 28（4）： 133?136.

[7] 曹洁，金保召，赵宏.具有P2P功能的嵌入式流媒体播放器的设计[J].计算机工程与应用，2014（15）：87?90.

[8] 黄灯桥. Ext JS权威指南：基于Ext 4.1，全面讲解Ext开发方法、技巧与最佳实践，通过源码剖析Ext原理[M].北京：机械工业出版社，2012.

[9] 李冲，熊淑华，魏颖颖.基于CSS与JavaScript技术的Tab面板的设计与实现[J].计算机技术与发展，2011（3）：28?35.

[10] 张瑞雪，宋明秋，公衍磊.逆序解析DOM树及网页正文信息提取[J].计算机科学，2011（4）：213?215.

式中：[fx，y]为计算出的窗口号;x为拖拽结束时SHIM所在Web页面的横坐标;y为纵坐标;scrWi为显示屏Web页面的宽度;rigWi为Web页面右方组件宽度;lefWi为左方组件的宽度;scrHi为Web页面的高度;walHi为当前Web页面顶部组件的高度;botHi为底部组件的高度;walHi混合模式下模拟墙的高度;diwScreen为当前播放器的分屏情况，取值为1，4，9，16;为当前分屏情况下单屏的宽度;sigHi为单屏的高度。

当拖拽操作完成时，此时SHIM切片漂浮在播放器界面上，可根据获取到的位置，通过式（3）计算相应的窗口号。

2.4  引入动态SHIM的拖拽点播流程

基于动态SHIM的拖拽点播具体流程，如图3所示。

3  结  语

本文分析了可视化指挥平台系统中拖拽对象被ActiveX播放器控件遮挡的原因，阐述了SHIM切片技术原理，引入的SHIM技术对开源组件zTree进行改进，实现了动态SHIM效果，解决了播放器控件遮蔽拖拽对象的问题。通过基于动态SHIM的位置偏移算法，解决了播放窗口定位问题，实现了平台的拖拽点播功能，为类似问题的解决提供了思路。

<＼＼192.168.6.11＼现代电子技术14年37卷第24期＼Image＼34t3.tif>

图3 基于动态SHIM的拖拽点播流程

参考文献

[1] 曾宪江，何鹏，冯金锐，等.基于PGIS平台的可视化指挥调度系统的设计与实现[J].警察技术，2013（3）：12?14.

[2] 朱振华，汪宁.基于PGIS的扁平化指挥调度系统的设计与实现[J].警察技术，2014（2）：12?14.

[3] 曾宪江，何鹏，朱维和，等.创新可视化指挥调度模式，为最安全城市保驾护航[J].警察技术，2012（5）：24?26.

[4] 赖根，肖明清.基于ActiveX控件技术的测试功能封装[J].计算机工程，2006（8）：82?83.

[5] 邹羚.多流媒体播放器ActiveX控件开发[J].微型机与应用， 2010（14）：65?67.

[6] DUAN Ke?xiao， ZHAO Xiang?mo， XU Zhi?gang. A Web?based multi?video player and its application in road asset management system [J]. Journal of Transport Information and Safety， 2010， 28（4）： 133?136.

[7] 曹洁，金保召，赵宏.具有P2P功能的嵌入式流媒体播放器的设计[J].计算机工程与应用，2014（15）：87?90.

[8] 黄灯桥. Ext JS权威指南：基于Ext 4.1，全面讲解Ext开发方法、技巧与最佳实践，通过源码剖析Ext原理[M].北京：机械工业出版社，2012.

[9] 李冲，熊淑华，魏颖颖.基于CSS与JavaScript技术的Tab面板的设计与实现[J].计算机技术与发展，2011（3）：28?35.

[10] 张瑞雪，宋明秋，公衍磊.逆序解析DOM树及网页正文信息提取[J].计算机科学，2011（4）：213?215.