1，使用在页面中调用ActiveX控件javascript
<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>
这里的html
classid,是ActiveX控件的编号，能够在注册表中查到java
codebase，是控件没有安装的状况下须要去查找的路径，一般后面要加上版本号.如：codebase/NetVideoActiveX23.cab#version=2,3,9,1chrome
param， 子节点的param则是该控件的参数列表ide
注意：这里的activex是微软开发且闭源的,仅适用于IE（本人一直用的是Chrome因此一直不显示控件，这里提醒一下）post
Firefox和Chrome须要安装特定的插件：测试
若是chrome安装：ActiveX for Chrome （未测试）ui
若是是Firfox安装：npActivexPlugin（未测试）spa
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="初始化插件" οnclick="InitPreviewOCX()" />
</div>
<div>
<select id="wintype">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" value="设置窗口模式" οnclick="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="预览" οnclick="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);不然预览不成功