208 lines
10 KiB
HTML
208 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta http-equiv="Pragma" content="no-cache" />
|
||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
||
<meta http-equiv="Expires" content="0" />
|
||
<link rel="stylesheet" href="css/style.css"></head>
|
||
<body>
|
||
<div class="h5-left">
|
||
<div class="h5-play-wrap">
|
||
</div>
|
||
<fieldset class="h5-fieldset-wrap">
|
||
<legend>登录</legend>
|
||
<div class="h5-form-item">
|
||
<label>设备ip</label>
|
||
<input type="text" id="h5_ip" value="172.10.3.70">
|
||
</div>
|
||
<div class="h5-form-item fn-padl10">
|
||
<label>端口</label>
|
||
<input type="text" id="h5_port" value="80">
|
||
</div>
|
||
<div class="h5-form-item">
|
||
<label>用户名</label>
|
||
<input type="text" id="h5_user" value="admin">
|
||
</div>
|
||
<div class="h5-form-item fn-padl10">
|
||
<label>密码</label>
|
||
<input type="text" id="h5_password" value="admin123">
|
||
</div>
|
||
<div class="h5-form-item" style="margin-left: 228px;">
|
||
<label>窗口分割</label>
|
||
<select class="h5-select" sel-for="onChangeWdnNum">
|
||
<option value="1" selected="">1x1</option>
|
||
<option value="2">2x2</option>
|
||
<option value="3">3x3</option>
|
||
<option value="4">4x4</option>
|
||
</select>
|
||
</div>
|
||
<div class="h5-form-item fn-clear" style="height: 30px;">
|
||
<input type="button" value="登录" class="h5-button" btn-for="onLogin">
|
||
<input type="button" value="注销" class="h5-button fn-marl10" btn-for="onLogout">
|
||
<label class="fn-padl10">登录状态：</label>
|
||
<span style="color: red;" id="h5_loginState">未登录</span>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="h5-fieldset-wrap">
|
||
<legend>预览</legend>
|
||
<div class="h5-form-item">
|
||
<label>通道列表</label>
|
||
</div>
|
||
<ul class="h5-ul" id="h5_channel_list">
|
||
</ul>
|
||
<div class="h5-form-item fn-padl10">
|
||
<label>码流类型</label>
|
||
<select id="h5_stream" sel-for="onChangeStream"></select>
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<label>音量</label>
|
||
<input type="range" id="h5_volume" min="0" max="1" step="0.1" value="0.5">
|
||
<span id="h5_volume_value"></span>
|
||
<span>（范围：0~1）</span>
|
||
</div>
|
||
<div class="h5-form-item fn-clear" style="display: none;">
|
||
<input type="button" class="h5-button" value="开始预览" btn-for="onPreview">
|
||
<input type="button" class="h5-button fn-marl10" value="停止预览" btn-for="onStopPreview">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" value="打开声音" btn-for="onTurnOnSound">
|
||
<input type="button" class="h5-button fn-marl10" value="关闭声音" btn-for="onTurnSoundOff">
|
||
<input type="button" class="h5-button fn-marl10" value="开始对讲" btn-for="onStartTalk">
|
||
<input type="button" class="h5-button fn-marl10" value="停止对讲" btn-for="onStopTalk">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" value="抓图" btn-for="onSnap">
|
||
<input type="button" class="h5-button fn-marl10" value="开始录像" btn-for="onStartRecord">
|
||
<input type="button" class="h5-button fn-marl10" value="停止录像" btn-for="onStopRecord">
|
||
<input type="button" class="h5-button fn-marl10" value="全屏" btn-for="onSetFull">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" style="width: 100px;" value="开启电子放大" btn-for="onStartEnlarge">
|
||
<input type="button" class="h5-button fn-marl10" style="width: 100px;" value="关闭电子放大" btn-for="onStopEnlarge">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" style="width: 100px;" value="开启区域放大" btn-for="onStartGridEnlarge">
|
||
<input type="button" class="h5-button fn-marl10" style="width: 100px;" value="关闭区域放大" btn-for="onCloseGridEnlarge">
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="h5-middle">
|
||
<fieldset class="h5-fieldset-wrap">
|
||
<legend>云台控制</legend>
|
||
<div class="h5-step-wrap">
|
||
<span>步长(1-8):</span>
|
||
<select id="h5_ptz_step" style="width: 130px;">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5" selected="">5</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
</select>
|
||
</div>
|
||
<div class="h5-ptz-wrap" title="云台按钮操作界面">
|
||
<input type="button" class="h5-button" value="左上" onmousedown="onHandlePTZ('LeftUp', false)" onmouseup="onHandlePTZ('LeftUp', true)">
|
||
<input type="button" class="h5-button" value="上" onmousedown="onHandlePTZ('Up', false)" onmouseup="onHandlePTZ('Up', true)">
|
||
<input type="button" class="h5-button" value="右上" onmousedown="onHandlePTZ('RightUp', false)" onmouseup="onHandlePTZ('RightUp', true)">
|
||
<input type="button" class="h5-button" value="左" onmousedown="onHandlePTZ('Left', false)" onmouseup="onHandlePTZ('Left', true)">
|
||
<input type="button" class="h5-button" value="自动" onmousedown="onHandlePTZ('Auto', false)" onmouseup="onHandlePTZ('Auto', true)">
|
||
<input type="button" class="h5-button" value="右" onmousedown="onHandlePTZ('Right', false)" onmouseup="onHandlePTZ('Right', true)">
|
||
<input type="button" class="h5-button" value="左下" onmousedown="onHandlePTZ('LeftDown', false)" onmouseup="onHandlePTZ('LeftDown', true)">
|
||
<input type="button" class="h5-button" value="下" onmousedown="onHandlePTZ('Down', false)" onmouseup="onHandlePTZ('Down', true)">
|
||
<input type="button" class="h5-button" value="右下" onmousedown="onHandlePTZ('RightDown', false)" onmouseup="onHandlePTZ('RightDown', true)">
|
||
</div>
|
||
<div class="h5-zoomfocus-wrap" title="变倍聚焦操作界面">
|
||
<input type="button" class="h5-button" value="变倍-" onmousedown="onHandlePTZ('ZoomWide', false)" onmouseup="onHandlePTZ('ZoomWide', true)">
|
||
<input type="button" class="h5-button" value="变倍+" onmousedown="onHandlePTZ('ZoomTele', false)" onmouseup="onHandlePTZ('ZoomTele', true)">
|
||
<input type="button" class="h5-button" value="聚焦-" onmousedown="onHandlePTZ('FocusFar', false)" onmouseup="onHandlePTZ('FocusFar', true)">
|
||
<input type="button" class="h5-button" value="聚焦+" onmousedown="onHandlePTZ('FocusNear', false)" onmouseup="onHandlePTZ('FocusNear', true)">
|
||
<input type="button" class="h5-button" value="光圈-" onmousedown="onHandlePTZ('IrisSmall', false)" onmouseup="onHandlePTZ('IrisSmall', true)">
|
||
<input type="button" class="h5-button" value="光圈+" onmousedown="onHandlePTZ('IrisLarge', false)" onmouseup="onHandlePTZ('IrisLarge', true)">
|
||
</div>
|
||
<div class="h5-preset-wrap" title="预置点操作界面">
|
||
<div class="h5-item-form" style="margin-bottom: 10px;">
|
||
<label>预置点：</label>
|
||
<input type="text" id="h5_preset">
|
||
</div>
|
||
<input type="button" class="h5-button" value="查看" onclick="onHandlePTZ('GotoPreset', false)">
|
||
<input type="button" class="h5-button" value="增加" onclick="onHandlePTZ('SetPreset', false)">
|
||
<input type="button" class="h5-button" value="删除" onclick="onHandlePTZ('ClearPreset', false)" >
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="h5-fieldset-wrap" style="width: 600px;">
|
||
<legend>录像回放</legend>
|
||
<div class="h5-form-item">
|
||
<label>开始时间</label>
|
||
<input type="datetime-local" step="1" style="width: 170px;" id="h5_startTime">
|
||
</div>
|
||
<div class="h5-form-item" style="margin-left: 20px;">
|
||
<label>结束时间</label>
|
||
<input type="datetime-local" step="1" style="width: 170px;" id="h5_endTime">
|
||
</div>
|
||
<div class="h5-form-item">
|
||
<label>通道列表</label>
|
||
<select class="h5-select" id="h5_playback_channel"></select>
|
||
<input type="button" class="h5-button fn-marl10" value="搜索" btn-for="onSearchRecord">
|
||
</div>
|
||
<table class="h5-table" id="h5_table">
|
||
<thead>
|
||
<tr>
|
||
<td style="width: 50px;"><input type="checkbox" btn-for="onCheckAll" id="h5_checkAll"></td>
|
||
<td style="width: 50px;">索引</td>
|
||
<td style="width: 260px;">时间</td>
|
||
<td style="width: 85px;">文件大小(KB)</td>
|
||
<td style="width: 165px;">时间戳</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
<div class="h5-form-item fn-mart10" >
|
||
<input type="button" btn-for="onDownload" class="h5-button" value="下载">
|
||
<span style="width: 40px">下载进度：<span id="h5_down_process" style="width: 50px"></span></span>
|
||
<input type="button" btn-for="stopDownLoad" class="h5-button" value="取消下载">
|
||
<a id="h5_first" class="h5-link" style="margin-left: 128px;" href="javascript:;">首页</a>
|
||
<a id="h5_pre" class="h5-link" href="javascript:;">上页</a>
|
||
<span>
|
||
<span id="h5_curPage">2</span>/<span id="h5_totalPage">5</span>
|
||
</span>
|
||
<a id="h5_next" class="h5-link" href="javascript:;">下页</a>
|
||
<a id="h5_last" class="h5-link" href="javascript:;">末页</a>
|
||
<input type="text" style="width: 30px;" id="h5_goNumber">
|
||
<input type="button" value="GO!" id="h5_goPage" style="width: 40px">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" value="开始回放(双击列表行)" disabled class="h5-button" style="width: 145px;" btn-for="onPausePlayback">
|
||
<input type="button" value="暂停" class="h5-button" btn-for="onPausePlayback">
|
||
<input type="button" value="继续" class="h5-button" btn-for="onContinuePlayback">
|
||
<input type="button" value="结束回放" class="h5-button" btn-for="onClosePlayback">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10" style="display: none;">
|
||
<span>当前播放秒数</span>
|
||
<span id="h5_curTime">--</span>
|
||
<span>/</span>
|
||
<span id="h5_totalTime">--</span>
|
||
<input type="text" id="h5_goTime" style="width: 50px;">
|
||
<input type="button" class="h5-button" btn-for="onGoTime" value="GO!">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<label>裁剪起始时间</label>
|
||
<input type="datetime-local" step="1" style="width: 200px;" id="h5_cutStartTime">
|
||
<span> - </span>
|
||
<input type="datetime-local" step="1" style="width: 200px;" id="h5_cutEndTime">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" class="h5-button" style="width:200px" btn-for="onStartCut" value="开始裁剪(先勾选一个录像)"/>
|
||
<span>裁剪进度：<span id="h5_cut_process"></span></span>
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" btn-for="stopDownLoad" class="h5-button" value="取消裁剪">
|
||
</div>
|
||
</fieldset>
|
||
|
||
</div>
|
||
<script src="module/PlayerControl.js"></script><script src="index.js"></script></body>
|
||
</html> |