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

一种基于动态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 视频拖拽点播功能 　　在可视化指挥调度系统中，为了提升用户操作体验，往往要求实现拖拽点播功能，即鼠标在设备树的设备节点上按下后，移动鼠标到播放器窗口上，松开鼠标，实现点中设备在特定播放窗口上的视频点播。 　　拖拽分为直