<!DOCTYPE html>
|
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>海康WEB4.0插件-视频播放</title>
|
|
<link rel="stylesheet" th:href="@{../../static/plugins/layui/css/layui.css}" media="all">
|
<link rel="stylesheet" th:href="@{../../static/admin/afgl/video.css}">
|
<style>
|
.layui-fluid {
|
position: relative;
|
margin: 0 auto;
|
padding: unset;
|
}
|
|
.layui-col-space20 {
|
margin: unset;
|
}
|
|
.layui-col-space20 > * {
|
padding: 10px 5px;
|
}
|
|
/** 隐藏列表下拉滚动条 **/
|
.scroll::-webkit-scrollbar {
|
display: none;
|
}
|
|
embed {
|
width: 100%;
|
height: 100%;
|
}
|
|
.sp-showItem2 {
|
height: 530px;
|
}
|
</style>
|
</head>
|
|
<body class="pdgxq-body">
|
<div class="i-container">
|
|
<div class="jmkt-main">
|
<div class="layui-fluid">
|
<div class="sp-boxWrap layui-row layui-col-space20">
|
<div class="layui-col-lg9 layui-col-md9">
|
<div class="pdgxq-m1-left sp-box">
|
<div class="sp-tab-bd" style="padding: 10px;">
|
<div class="sp-showBox layui-row show">
|
<div class="layui-col-lg12 layui-col-md12">
|
<div id="divPlugin" class="sp-showItem2 ">
|
<img th:src="@{../../static/images/sp-img.png}" class="sp-hideImg"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div><!--pdgxq-m1-left end-->
|
<div class="layui-col-lg3 layui-col-md3">
|
<div class="pdgxq-m1-right sp-box">
|
<div class="pdgxq-H">
|
<h3><i></i>云台控制</h3>
|
</div>
|
<div class="sp-cz-wrap">
|
<div class="sp-cz-box">
|
<ul>
|
<li class="sp-cz-l1">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(5);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l2">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(1);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l3">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(7);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l4">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(3);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l5">
|
<a href="javascript:void(0)" onclick="clickStartRealPlay();">
|
<img th:src="${logo}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l6">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(4);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l7">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(6);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l8">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(2);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
<li class="sp-cz-l9">
|
<a href="javascript:void(0)" onmousedown="mouseDownPTZControl(8);"
|
onmouseup="mouseUpPTZControl();">
|
<img th:src="@{../../static/images/sp-arrow.png}"/>
|
</a>
|
</li>
|
</ul>
|
</div>
|
<div class="sp-bianbei fl">
|
<button type="button" class="sp-sxBtn sp-czBtn" onmousedown="PTZZoomout();"
|
onmouseup="PTZZoomStop();">
|
<i>－</i>
|
</button>
|
<span>变倍</span>
|
<button type="button" class="sp-fdBtn sp-czBtn" onmousedown="PTZZoomIn();"
|
onmouseup="PTZZoomStop();">
|
<i>＋</i>
|
</button>
|
</div>
|
<div class="sp-bianbei fr">
|
<input id="preset" type="text" value="预置点" class="preset-input">
|
<button type="button" class="sp-fdBtn sp-czBtn fr" onclick="clickSetPreset()">
|
<i>➸</i>
|
</button>
|
</div>
|
</div><!--sp-cz-wrap end-->
|
<div class="pdgxq-H">
|
<h3><i></i>设备信息</h3>
|
</div>
|
<div class="sp-table-box">
|
<div class="sp-table scroll">
|
<ul id="videoList" class="sp-list">
|
<li>
|
<a href="javascript:void(0)">
|
<p>设备名称：<span th:text="${cameraData.name}"></span></p>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)">
|
<p>设备类型：<span th:text="${cameraData.type=='02'?'球机':'枪机'}"></span></p>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)">
|
<p>设备品牌：<span th:text="${cameraData.brand}"></span></p>
|
</a>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div style="display:none">
|
<fieldset class="login">
|
<legend>登录</legend>
|
<table cellpadding="0" cellspacing="3" border="0">
|
<tr>
|
<td class="tt">IP地址</td>
|
<td><input id="loginip" type="text" class="txt" th:value="${cameraData.ipIn}"/>
|
</td>
|
<td class="tt">端口号</td>
|
<td><input id="port" type="text" class="txt" th:value="${cameraData.portInV}"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tt">用户名</td>
|
<td><input id="username" type="text" class="txt"
|
th:value="${cameraData.loginId}"/></td>
|
<td class="tt">密码</td>
|
<td><input id="password" type="password" class="txt"
|
th:value="${cameraData.pwd}"/></td>
|
</tr>
|
<tr>
|
<td class="tt">设备端口</td>
|
<td colspan="2"><input id="deviceport" type="text" class="txt" value=""/>（可选参数）
|
</td>
|
<td>
|
窗口分割数
|
<select class="sel2" onchange="changeWndNum(this.value);">
|
<option value="1" selected>1x1</option>
|
</select>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="4">
|
<input type="button" class="btn" value="登录" onclick="clickLogin();"/>
|
<input type="button" class="btn" value="退出" onclick="clickLogout();"/>
|
<input type="button" class="btn2" value="获取基本信息"
|
onclick="clickGetDeviceInfo();"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tt">已登录设备</td>
|
<td>
|
<select id="ip" class="sel" onchange="getChannelInfo();"></select>
|
</td>
|
<td class="tt">通道列表</td>
|
<td>
|
<select id="channels" class="sel" th:value="${cameraData.chanNum}"></select>
|
</td>
|
</tr>
|
</table>
|
</fieldset>
|
<fieldset class="operate">
|
<legend>操作信息</legend>
|
<div id="opinfo" class="opinfo"></div>
|
</fieldset>
|
</div>
|
</div>
|
</div><!--pdgxq-m1-left end-->
|
</div><!--sp-boxWrap end-->
|
</div>
|
</div><!--jmkt-main end-->
|
</div> <!--i-container end-->
|
<script th:inline="javascript">
|
var cameraData = [[${cameraData}]];
|
var cameraType = [[${cameraData.type}]];
|
</script>
|
<script th:src="@{../../static/plugins/layui/layui.js}"></script>
|
<script th:src="@{../../static/js/jquery.min.js}"></script>
|
<script th:src="@{../../static/plugins/hikweb4/webVideoCtrl.js}"></script>
|
<script th:src="@{../../static/admin/afgl/video-hikweb4.js}"></script>
|
</body>
|
|
</html>
|
