一種基于動(dòng)態(tài)SHIM的視頻拖拽點(diǎn)播方案

2014-12-18 17:58:55劉峰徐川金晉牛毅

現(xiàn)代電子技術(shù) 2014年24期

劉峰+徐川+金晉+牛毅

摘 ?要：在此闡述了B/S架構(gòu)的可視化系統(tǒng)中拖拽點(diǎn)播功能的實(shí)現(xiàn)方案。針對(duì)拖拽點(diǎn)播中播放控件遮蔽頁(yè)面元素和窗口無(wú)法定位的問(wèn)題，給出了基于SHIM技術(shù)的解決方法。通過(guò)動(dòng)態(tài)SHIM技術(shù)，對(duì)拖拽DOM節(jié)點(diǎn)進(jìn)行處理，對(duì)zTree樹(shù)形組件進(jìn)行改進(jìn)，解決了ActiveX播放控件遮蔽頁(yè)面元素的問(wèn)題。同時(shí)，設(shè)計(jì)了基于SHIM位置的動(dòng)態(tài)偏移算法，解決了播放窗口無(wú)法定位的問(wèn)題。該方案為Web項(xiàng)目中拖拽問(wèn)題提供了有效的解決思路，提升了用戶體驗(yàn)。

關(guān)鍵詞：拖拽; ActiveX; SHIM; zTree

中圖分類號(hào)： TN964?34 ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼： A ? ? ? ? ? ? ? ? ? ? ? ? ? ?文章編號(hào)： 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 ?引 ?言

隨著全國(guó)社會(huì)視頻監(jiān)控建設(shè)的不斷深入推進(jìn)，貼近社會(huì)管理實(shí)戰(zhàn)的視頻監(jiān)控業(yè)務(wù)應(yīng)用越來(lái)越受到重視?？梢暬笓]調(diào)度系統(tǒng)是集視頻資源快速組織、解碼上屏、電子巡邏、社會(huì)面管控和重大突發(fā)事件指揮調(diào)度等功能于一體的綜合業(yè)務(wù)應(yīng)用系統(tǒng)[1?3]。為了進(jìn)一步增強(qiáng)該系統(tǒng)的快速反應(yīng)指揮能力，提升用戶體驗(yàn)，通過(guò)拖拽設(shè)備樹(shù)節(jié)點(diǎn)到視頻播放器窗口，實(shí)現(xiàn)視頻拖拽點(diǎn)播功能。但是，在拖拽過(guò)程中，基于ActiveX[4]的視頻播放器控件[5?7]界面會(huì)遮蔽所拖拽的設(shè)備樹(shù)節(jié)點(diǎn)，同時(shí)在響應(yīng)拖拽事件時(shí)不能定位播放器窗口位置，進(jìn)而導(dǎo)致拖拽點(diǎn)播功能無(wú)法實(shí)現(xiàn)。

為了解決上述問(wèn)題，引入了SHIM技術(shù)原理[8]，對(duì)zTree樹(shù)形組件進(jìn)行改進(jìn)，為樹(shù)節(jié)點(diǎn)元素實(shí)現(xiàn)SHIM動(dòng)態(tài)切片效果，使其在拖動(dòng)過(guò)程中不再被播放器控件所遮蔽。同時(shí)，使用基于動(dòng)態(tài)SHIM的位置偏移算法，實(shí)現(xiàn)了拖放點(diǎn)播窗口的動(dòng)態(tài)定位。

1 ?視頻拖拽點(diǎn)播功能和組件

鼠標(biāo)拖拽功能的實(shí)現(xiàn)需要拖拽源和拖拽目的地的密切配合?？梢暬曨l指揮系統(tǒng)中的拖拽源是設(shè)備樹(shù)節(jié)點(diǎn)，拖拽目的地是視頻播放器窗口，通過(guò)二者的交互實(shí)現(xiàn)系統(tǒng)的拖拽點(diǎn)播功能。

1.1 ?視頻拖拽點(diǎn)播功能

在可視化指揮調(diào)度系統(tǒng)中，為了提升用戶操作體驗(yàn)，往往要求實(shí)現(xiàn)拖拽點(diǎn)播功能，即鼠標(biāo)在設(shè)備樹(shù)的設(shè)備節(jié)點(diǎn)上按下后，移動(dòng)鼠標(biāo)到播放器窗口上，松開(kāi)鼠標(biāo)，實(shí)現(xiàn)點(diǎn)中設(shè)備在特定播放窗口上的視頻點(diǎn)播。

拖拽分為直接拖拽和復(fù)制拖拽兩種。

直接拖拽：即用戶在拖拽的過(guò)程中，拖拽的目標(biāo)就是相應(yīng)的對(duì)象，當(dāng)用戶觸發(fā)對(duì)象的拖拽事件時(shí)，對(duì)象會(huì)跟隨鼠標(biāo)移動(dòng)。在整個(gè)鼠標(biāo)移動(dòng)的過(guò)程中，拖拽對(duì)象改變的僅是其顯示位置，而整個(gè)頁(yè)面的響應(yīng)代碼將會(huì)改變拖拽對(duì)象的CSS信息[9]或者改變拖拽對(duì)象的父標(biāo)簽，頁(yè)面代碼不會(huì)增加新的HTML標(biāo)簽元素。

復(fù)制拖拽，即用戶在拖拽的過(guò)程中，當(dāng)用戶點(diǎn)擊觸發(fā)對(duì)象的拖拽事件的瞬間，頁(yè)面生成了一個(gè)與對(duì)象具有相同意義的對(duì)象跟隨著鼠標(biāo)的移動(dòng)。在復(fù)制拖拽的過(guò)程中，生成對(duì)象的CSS信息會(huì)隨著鼠標(biāo)的移動(dòng)產(chǎn)生變化，原來(lái)對(duì)象的CSS信息沒(méi)有任何變化，并且在拖拽事件被觸發(fā)的瞬間，Web頁(yè)面的DOM[10]樹(shù)會(huì)增加新的DOM標(biāo)簽元素。

由于直接拖拽會(huì)改變?cè)O(shè)備樹(shù)原有的組織結(jié)構(gòu)，一方面不符合用戶操作習(xí)慣，另一方面會(huì)引起樹(shù)結(jié)構(gòu)的重新渲染，增加系統(tǒng)開(kāi)銷，故系統(tǒng)視頻拖拽點(diǎn)播功能采用了復(fù)制拖拽方式。

1.2 ?zTree樹(shù)形組件

zTree是一個(gè)基于 JQuery 框架實(shí)現(xiàn)的Web客戶端多功能樹(shù)形結(jié)構(gòu)輕量級(jí)開(kāi)源組件，兼容多種瀏覽器，具有靈活的節(jié)點(diǎn)編輯（增/刪/改/查）功能，能夠?qū)崿F(xiàn)節(jié)點(diǎn)拖拽，同時(shí)性能優(yōu)異，可擴(kuò)展性強(qiáng)，將其應(yīng)用在系統(tǒng)平臺(tái)中，作為設(shè)備資源的組織載體，成為了廣大開(kāi)發(fā)者的首選。

1.3 ?基于ActiceX的播放器控件

視頻播放器控件基于ActiveX技術(shù)開(kāi)發(fā)，可以通過(guò)Object標(biāo)簽嵌入Web頁(yè)面，提供JavaScript調(diào)用接口，支持視頻的解碼播放。

Web頁(yè)面中DOM元素顯示的堆疊次序可以通過(guò)z?index屬性控制，而視頻播放器控件無(wú)此屬性。當(dāng)視頻播放器控件與DOM元素在同一區(qū)域疊加顯示時(shí)，視頻播放器界面會(huì)將Web界面中其他的DOM元素遮擋，如圖1所示。所以，當(dāng)進(jìn)行視頻拖拽點(diǎn)播時(shí)，拖拽節(jié)點(diǎn)將會(huì)被視頻播放器界面遮蔽。

圖1 Web頁(yè)面中播放器堆疊示意圖

2 ?引入動(dòng)態(tài)SHIM的拖拽點(diǎn)播

本文引入SHIM技術(shù)，對(duì)zTree組件進(jìn)行改進(jìn)，解決了播放器組件遮蔽拖拽對(duì)象問(wèn)題。同時(shí)采用基于SHIM的位置的動(dòng)態(tài)偏移算法，解決了播放窗口定位的問(wèn)題。

2.1 ?SHIM技術(shù)原理

SHIM技術(shù)是一種切片技術(shù)，它的原理是在被遮蔽的對(duì)象下面放一層隱形的薄片，同時(shí)薄片漂浮在遮蔽對(duì)象之上。如圖2所示。

2.2 ?使用動(dòng)態(tài)SHIM改進(jìn)zTree

在Web頁(yè)面中，zTree組件的樹(shù)節(jié)點(diǎn)元素拖拽到視頻播放器控件范圍內(nèi)時(shí)會(huì)被控件遮蔽，同時(shí)其鼠標(biāo)焦點(diǎn)也被視頻播放器控件搶占，導(dǎo)致DOM定義的UP事件無(wú)法響應(yīng)。因此，需要找到一個(gè)能夠漂浮在視頻播放器控件上方的DOM元素來(lái)解決此問(wèn)題。

<＼＼192.168.6.11＼現(xiàn)代電子技術(shù)14年37卷第24期＼Image＼34t2.tif>

圖2 SHIM技術(shù)原理示意圖

通過(guò)研究DOM標(biāo)簽元素，發(fā)現(xiàn)只有iframe標(biāo)簽元素與視頻播放器控件放在同一區(qū)域時(shí)可以浮在視頻播放器之上。通過(guò)動(dòng)態(tài)連續(xù)改變iframe標(biāo)簽元素的位置信息屬性，對(duì)于視頻播放器控件而言，整個(gè)iframe標(biāo)簽元素類似于浮動(dòng)面板，故采用iframe標(biāo)簽元素作為動(dòng)態(tài)SHIM。

在拖拽過(guò)程中，SHIM切片跟隨鼠標(biāo)不斷移動(dòng)，形成連續(xù)的動(dòng)態(tài)效果，其形狀大小也隨拖拽對(duì)象大小變化而變化，避免了因每一次拖拽對(duì)象的大小存在差異而造成SHIM切片過(guò)大或過(guò)小，進(jìn)而遮蔽其他組件或者遮蔽不足等問(wèn)題的出現(xiàn)。動(dòng)態(tài)SHIM部分實(shí)現(xiàn)的偽代碼如下所示：

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為拖拽過(guò)程中跟隨鼠標(biāo)移動(dòng)的對(duì)象;shim為相應(yīng)的動(dòng)態(tài)切片對(duì)象。

zTree組件在拖放結(jié)束時(shí)，需要銷毀組件生成的DOM節(jié)點(diǎn)與新增的SHIM切片，否則會(huì)導(dǎo)致客戶端內(nèi)存泄露和響應(yīng)變慢。為了不破壞zTree組件原來(lái)的內(nèi)部實(shí)現(xiàn)結(jié)構(gòu)，本文在對(duì)zTree組件進(jìn)行改進(jìn)時(shí)，仍然采用在樹(shù)節(jié)點(diǎn)拖拽事件開(kāi)始時(shí)，為所有的DOM元素增加UP事件來(lái)銷毀DOM節(jié)點(diǎn)和SHIM切片的方法。

2.3 ?基于動(dòng)態(tài)SHIM的位置偏移算法

在B/S架構(gòu)的瀏覽器客戶端實(shí)現(xiàn)拖拽點(diǎn)播功能，本質(zhì)上是通過(guò)頁(yè)面SHIM切片跟隨鼠標(biāo)移動(dòng)，在用戶松開(kāi)鼠標(biāo)時(shí)，計(jì)算SHIM切片的坐標(biāo)位置，使用位置偏移算法，計(jì)算出視頻播放器的窗口號(hào)，實(shí)現(xiàn)在該窗口的視頻點(diǎn)播。

本文設(shè)計(jì)了基于動(dòng)態(tài)SHIM的位置偏移算法，來(lái)實(shí)現(xiàn)上述過(guò)程。公式如下：

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

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

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

式中：[fx，y]為計(jì)算出的窗口號(hào);x為拖拽結(jié)束時(shí)SHIM所在Web頁(yè)面的橫坐標(biāo);y為縱坐標(biāo);scrWi為顯示屏Web頁(yè)面的寬度;rigWi為Web頁(yè)面右方組件寬度;lefWi為左方組件的寬度;scrHi為Web頁(yè)面的高度;walHi為當(dāng)前Web頁(yè)面頂部組件的高度;botHi為底部組件的高度;walHi混合模式下模擬墻的高度;diwScreen為當(dāng)前播放器的分屏情況，取值為1，4，9，16;為當(dāng)前分屏情況下單屏的寬度;sigHi為單屏的高度。

當(dāng)拖拽操作完成時(shí)，此時(shí)SHIM切片漂浮在播放器界面上，可根據(jù)獲取到的位置，通過(guò)式（3）計(jì)算相應(yīng)的窗口號(hào)。

2.4 ?引入動(dòng)態(tài)SHIM的拖拽點(diǎn)播流程

基于動(dòng)態(tài)SHIM的拖拽點(diǎn)播具體流程，如圖3所示。

3 ?結(jié) ?語(yǔ)

本文分析了可視化指揮平臺(tái)系統(tǒng)中拖拽對(duì)象被ActiveX播放器控件遮擋的原因，闡述了SHIM切片技術(shù)原理，引入的SHIM技術(shù)對(duì)開(kāi)源組件zTree進(jìn)行改進(jìn)，實(shí)現(xiàn)了動(dòng)態(tài)SHIM效果，解決了播放器控件遮蔽拖拽對(duì)象的問(wèn)題。通過(guò)基于動(dòng)態(tài)SHIM的位置偏移算法，解決了播放窗口定位問(wèn)題，實(shí)現(xiàn)了平臺(tái)的拖拽點(diǎn)播功能，為類似問(wèn)題的解決提供了思路。

<＼＼192.168.6.11＼現(xiàn)代電子技術(shù)14年37卷第24期＼Image＼34t3.tif>

圖3 基于動(dòng)態(tài)SHIM的拖拽點(diǎn)播流程

參考文獻(xiàn)

[1] 曾憲江，何鵬，馮金銳，等.基于PGIS平臺(tái)的可視化指揮調(diào)度系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].警察技術(shù)，2013（3）：12?14.

[2] 朱振華，汪寧.基于PGIS的扁平化指揮調(diào)度系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].警察技術(shù)，2014（2）：12?14.

[3] 曾憲江，何鵬，朱維和，等.創(chuàng)新可視化指揮調(diào)度模式，為最安全城市保駕護(hù)航[J].警察技術(shù)，2012（5）：24?26.

[4] 賴根，肖明清.基于ActiveX控件技術(shù)的測(cè)試功能封裝[J].計(jì)算機(jī)工程，2006（8）：82?83.

[5] 鄒羚.多流媒體播放器ActiveX控件開(kāi)發(fā)[J].微型機(jī)與應(yīng)用， 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功能的嵌入式流媒體播放器的設(shè)計(jì)[J].計(jì)算機(jī)工程與應(yīng)用，2014（15）：87?90.

[8] 黃燈橋. Ext JS權(quán)威指南：基于Ext 4.1，全面講解Ext開(kāi)發(fā)方法、技巧與最佳實(shí)踐，通過(guò)源碼剖析Ext原理[M].北京：機(jī)械工業(yè)出版社，2012.

[9] 李沖，熊淑華，魏穎穎.基于CSS與JavaScript技術(shù)的Tab面板的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011（3）：28?35.

[10] 張瑞雪，宋明秋，公衍磊.逆序解析DOM樹(shù)及網(wǎng)頁(yè)正文信息提取[J].計(jì)算機(jī)科學(xué)，2011（4）：213?215.