目前只支持IE浏览器，如果不行下载插件WebVideoActiveX.ocx （地址：https://files.cnblogs.com/files/zclqian/%E6%B5%B7%E5%BA%B7%E5%A8%81%E8%A7%86web3.0%E5%BC%80%E5%8F%91%E5%8C%85.zip）
解压后运行里面的WebVideoActiveX.ocx文件就行
plugin.HWP_Play(rstpUri, "YWRtaW46MTIzNDU", 0, "", "");
rstpUri（参数一）：摄像头的ip
YWRtaW46MTIzNDU（参数二）:摄像头配置的用户和密码的base64加密（admin:12345 的格式加密）
参数三：窗口号，没有就为0
参数四和参数五：开始时间和结束时间，可以不填
实例代码如下：
<%@page contentType="text/html; charset=UTF-8"%>
<%@include file="/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 树形视图</title>
<link href="${ctx }/static/common/css/bootstrap.min14ed.css?v=3.3.6"
rel="stylesheet">
<link href="${ctx }/static/common/css/font-awesome.min93e3.css?v=4.4.0"
rel="stylesheet">
<link href="${ctx }/static/common/css/animate.min.css" rel="stylesheet">
<link href="${ctx }/static/common/css/style.min862f.css?v=4.1.0"
rel="stylesheet">
<link
href="${ctx }/static/common/css/plugins/treeview/bootstrap-treeview.css"
rel="stylesheet">
<style>
dl, dt, dd{margin:0; padding:0;}
.view-box{
width: 100%;
min-height: 300px;
}
.video{
width: 720px;
height: 540px;
margin: 0 auto;
/* display: block; */
border:1px solid #ccc;
}
.view-left{
width:25%;
float: left;
}
.view-wrapper{
text-align: left;
}
</style>
</head>
<body class="gray-bg">
<div class="row wrapper wrapper-content animated fadeInRight">
<div class="col-sm-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>监控通道</h5>
</div>
<div class="ibox-content">
<div id="treeview1" class="test"></div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>监控画面</h5>
<div class="ibox-tools">
<button class="btn btn-w-m btn-primary btn-sm" onclick="InitPreviewOCX()" style="margin-right:15px;">初始化插件</button>
<button class="btn btn-w-m btn-primary btn-sm" id="yulan">预览</button>
<!-- <input type="button" value="预览" onclick="StartRealPlay()" /> -->
</div>
</div>
<div class="ibox-content">
<!-- 视频监控 -->
<div class="view-box" id="table">
<object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808'
codebase='' standby='Waiting...' id='PreviewActiveX' name='ocx'
align='center' class="video">
<param name='wndtype' value='1'>
<param name='playmode' value='undefined'>
</object>
</div>
</div>
</div>
</div>
</div>
<script src="${ctx }/static/common/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx }/static/common/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx }/static/common/js/content.min.js?v=1.0.0"></script>
<script
src="${ctx }/static/common/js/plugins/treeview/bootstrap-treeview.js"></script>
<%-- <script src="${ctx }/static/common/js/treeview-demo.min1.js"></script> --%>
</body>
<script type="text/javascript">
var plugin = null;
function InitPreviewOCX() {
plugin = document.getElementById("PreviewActiveX");
alert("初始化成功");
}
$("#treeview1").treeview({
color : "#428bca",
data : e,
onNodeSelected : function(e, o) {
//alert(o.href);
$("#yulan").click(function(){
var rstpUri = o.href;
plugin.HWP_Play(rstpUri, "YWRtaW46MTIzNDU", 0, "", "");
})
//$("#event_output").prepend("<p>您单击了 " + o.text + "</p>")
}
})
</script>
</html>
有不明白的可以在评论里面留言，一定回答！！！！！！！