一種基于動態(tài)SHIM的視頻拖拽點播方案

劉峰+徐川+金晉+牛毅

摘 ?要： 在此闡述了B/S架構的可視化系統(tǒng)中拖拽點播功能的實現方案。針對拖拽點播中播放控件遮蔽頁面元素和窗口無法定位的問題，給出了基于SHIM技術的解決方法。通過動態(tài)SHIM技術，對拖拽DOM節(jié)點進行處理，對zTree樹形組件進行改進，解決了ActiveX播放控件遮蔽頁面元素的問題。同時，設計了基于SHIM位置的動態(tài)偏移算法，解決了播放窗口無法定位的問題。該方案為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 ?引 ?言

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

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

1 ?視頻拖拽點播功能和組件

鼠標拖拽功能的實現需要拖拽源和拖拽目的地的密切配合。可視化視頻指揮系統(tǒng)中的拖拽源是設備樹節(jié)點，拖拽目的地是視頻播放器窗口，通過二者的交互實現系統(tǒng)的拖拽點播功能。

1.1 ?視頻拖拽點播功能

在可視化指揮調度系統(tǒng)中，為了提升用戶操作體驗，往往要求實現拖拽點播功能，即鼠標在設備樹的設備節(jié)點上按下后，移動鼠標到播放器窗口上，松開鼠標，實現點中設備在特定播放窗口上的視頻點播。

拖拽分為直接拖拽和復制拖拽兩種。

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

復制拖拽，即用戶在拖拽的過程中，當用戶點擊觸發(fā)對象的拖拽事件的瞬間，頁面生成了一個與對象具有相同意義的對象跟隨著鼠標的移動。在復制拖拽的過程中，生成對象的CSS信息會隨著鼠標的移動產生變化，原來對象的CSS信息沒有任何變化，并且在拖拽事件被觸發(fā)的瞬間，Web頁面的DOM[10]樹會增加新的DOM標簽元素。

由于直接拖拽會改變設備樹原有的組織結構，一方面不符合用戶操作習慣，另一方面會引起樹結構的重新渲染，增加系統(tǒng)開銷，故系統(tǒng)視頻拖拽點播功能采用了復制拖拽方式。

1.2 ?zTree樹形組件

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

1.3 ?基于ActiceX的播放器控件

視頻播放器控件基于ActiveX技術開發(fā)，可以通過Object標簽嵌入Web頁面，提供JavaScript調用接口，支持視頻的解碼播放。

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

圖1 Web頁面中播放器堆疊示意圖

2 ?引入動態(tài)SHIM的拖拽點播

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

2.1 ?SHIM技術原理

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

2.2 ?使用動態(tài)SHIM改進zTree

在Web頁面中，zTree組件的樹節(jié)點元素拖拽到視頻播放器控件范圍內時會被控件遮蔽，同時其鼠標焦點也被視頻播放器控件搶占，導致DOM定義的UP事件無法響應。因此，需要找到一個能夠漂浮在視頻播放器控件上方的DOM元素來解決此問題。

<＼＼192.168.6.11＼現代電子技術14年37卷第24期＼Image＼34t2.tif>

圖2 SHIM技術原理示意圖

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

在拖拽過程中，SHIM切片跟隨鼠標不斷移動，形成連續(xù)的動態(tài)效果，其形狀大小也隨拖拽對象大小變化而變化，避免了因每一次拖拽對象的大小存在差異而造成SHIM切片過大或過小，進而遮蔽其他組件或者遮蔽不足等問題的出現。動態(tài)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為相應的動態(tài)切片對象。

zTree組件在拖放結束時，需要銷毀組件生成的DOM節(jié)點與新增的SHIM切片，否則會導致客戶端內存泄露和響應變慢。為了不破壞zTree組件原來的內部實現結構，本文在對zTree組件進行改進時，仍然采用在樹節(jié)點拖拽事件開始時，為所有的DOM元素增加UP事件來銷毀DOM節(jié)點和SHIM切片的方法。

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

在B/S架構的瀏覽器客戶端實現拖拽點播功能，本質上是通過頁面SHIM切片跟隨鼠標移動，在用戶松開鼠標時，計算SHIM切片的坐標位置，使用位置偏移算法，計算出視頻播放器的窗口號，實現在該窗口的視頻點播。

本文設計了基于動態(tài)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 ?引入動態(tài)SHIM的拖拽點播流程

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

3 ?結 ?語

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

<＼＼192.168.6.11＼現代電子技術14年37卷第24期＼Image＼34t3.tif>

圖3 基于動態(tài)SHIM的拖拽點播流程

參考文獻

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

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

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

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

[5] 鄒羚.多流媒體播放器ActiveX控件開發(fā)[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開發(fā)方法、技巧與最佳實踐，通過源碼剖析Ext原理[M].北京：機械工業(yè)出版社，2012.

[9] 李沖，熊淑華，魏穎穎.基于CSS與JavaScript技術的Tab面板的設計與實現[J].計算機技術與發(fā)展，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 ?引入動態(tài)SHIM的拖拽點播流程

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

3 ?結 ?語

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

<＼＼192.168.6.11＼現代電子技術14年37卷第24期＼Image＼34t3.tif>

圖3 基于動態(tài)SHIM的拖拽點播流程

參考文獻

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

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

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

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

[5] 鄒羚.多流媒體播放器ActiveX控件開發(fā)[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開發(fā)方法、技巧與最佳實踐，通過源碼剖析Ext原理[M].北京：機械工業(yè)出版社，2012.

[9] 李沖，熊淑華，魏穎穎.基于CSS與JavaScript技術的Tab面板的設計與實現[J].計算機技術與發(fā)展，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 ?引入動態(tài)SHIM的拖拽點播流程

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

3 ?結 ?語

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

<＼＼192.168.6.11＼現代電子技術14年37卷第24期＼Image＼34t3.tif>

圖3 基于動態(tài)SHIM的拖拽點播流程

參考文獻

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

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

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

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

[5] 鄒羚.多流媒體播放器ActiveX控件開發(fā)[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開發(fā)方法、技巧與最佳實踐，通過源碼剖析Ext原理[M].北京：機械工業(yè)出版社，2012.

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

[10] 張瑞雪，宋明秋，公衍磊.逆序解析DOM樹及網頁正文信息提取[J].計算機科學，2011（4）：213?215.