1,使用在頁面中調用ActiveX控件
<object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808' codebase='' standby='Waiting...' id='PreviewActiveX' width='100%' height='100%' name='ocx' align='center'> <param name='wndtype' value='1'> <param name='playmode' value='undefined'> </object>
這里的
classid,是ActiveX控件的編號,可以在注冊表中查到
codebase,是控件沒有安裝的情況下需要去查找的路徑,通常后面要加上版本號.如:codebase/NetVideoActiveX23.cab#version=2,3,9,1
param, 子節點的param則是該控件的參數列表
注意:這里的activex是微軟開發且閉源的,僅適用於IE(本人一直用的是Chrome所以一直不顯示控件,這里提醒一下)
Firefox和Chrome需要安裝特定的插件:
如果chrome安裝:ActiveX for Chrome (未測試)
如果是Firfox安裝:npActivexPlugin(未測試)
2,操作說明這里的海康視頻監控有兩個OCX控件供調用
一個是 NetVideoActiveX23.ocx
另一個是WebVideoActiveX.ocx
*區別這里我沒找到,如果知道的可以留言說一下~
我在用的時候是用的WebVideoActiveX.ocx
因為NetVideoActiveX23.ocx我嘗試調用StartRealPlay方法總是返回-1,所以預覽不成功,然后就改用WebVideoActiveX.ocx
cmd下注冊WebVideoActiveX.ocx:regsvr32 WebVideoActiveX.ocx
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="script/Jquery.js"></script> <script src="script/mjpegPlugin.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>10.24.1.114V23</title> <script src="script/dvr.js"></script> <script src="script/js.js"></script> </head> <body> <%--<div style="margin: 0px; width: 600px; height: 300px; background-color: #343434" id="main_plugin"></div>--%> <div style="width: 640px; height: 480px; margin: auto auto;"> <object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808' codebase='' standby='Waiting...' id='PreviewActiveX' width='100%' height='100%' name='ocx' align='center'> <param name='wndtype' value='1'> <param name='playmode' value='undefined'> </object> </div> <div style="float: left"> <div> <input type="button" value="初始化插件" onclick="InitPreviewOCX()" /> </div> <div> <select id="wintype"> <option>1</option> <option>2</option> <option>3</option> </select> <input type="button" value="設置窗口模式" onclick="InitWindow()" /> </div> <div> <span style="margin-right: 20px">窗口號: <select id="winNum"> <option>0</option> <option>1</option> <option>2</option> </select> </span> <span>通道號: <select id="chanelNum"> <option>0</option> <option>1</option> <option>2</option> </select> </span> <input type="button" value="預覽" onclick="StartRealPlay()" /> </div> </div> </body> </html> <script type="text/javascript"> var m_PreviewOCX = null var ipAddress = "192.168.13.211"; var rstpPort = "554"; var userPwd = "YWRtaW46MTIzNDU=" //初始化OCX插件 function InitPreviewOCX() { //if (!checkPlugin()) { // m_PreviewOCX = $("#mjpegPlugin").mjpegPlugin(); //} setTimeout(m_PreviewOCX = document.getElementById("PreviewActiveX"), 5000); } function InitWindow() { //iWindowType 畫面分割模式。 1 - 1窗口模式,2 - 4窗口模式,3 - 9窗口模 var iWindowType = $("#wintype").val(); m_PreviewOCX.HWP_ArrangeWindow(iWindowType); } function StartRealPlay() { var iChannelNum = $("#chanelNum").val(); var iWinNun = $("#winNum").val(); var rstpUri = "rtsp://" + ipAddress + ":" + rstpPort + "/PSIA/streaming/channels/" + (iChannelNum * 100 + 1); m_PreviewOCX.HWP_Play(rstpUri, userPwd, iWinNun, "", ""); } function GetSelectWndInfo(SelectWndInfo) { } function GetAllWndInfo(RealplayInfo) { } function PluginEventHandler(iEventType, iParam1, iParam2) { } function SetZeroChanEnlarge(EnlargeInfo) { } </script> <script for="PreviewActiveX" event="GetSelectWndInfo(SelectWndInfo)"> GetSelectWndInfo(SelectWndInfo); </script> <script for="PreviewActiveX" event="GetAllWndInfo(RealplayInfo)"> GetAllWndInfo(RealplayInfo); </script> <script for="PreviewActiveX" event="PluginEventHandler(iEventType, iParam1, iParam2)"> PluginEventHandler(iEventType, iParam1, iParam2); </script> <script for="PreviewActiveX" event="SetZeroChanEnlarge(EnlargeInfo)"> SetZeroChanEnlarge(EnlargeInfo); </script>
這里要注意,一定要先調用
m_PreviewOCX.HWP_ArrangeWindow(iWindowType);
否則預覽不成功