242 lines
10 KiB
HTML
242 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>视频播放</title>
|
|
|
|
<link rel="stylesheet" href="../../js/core/zTree/3.5/zTreeStyle.css" />
|
|
<link rel="stylesheet" href="../../css/video/light-theme.min.css" />
|
|
<link rel="stylesheet" href="../../css/video/colored-theme.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../js/core/layui2.7.6/css/layui.css"/>
|
|
<link rel="stylesheet" href="../../css/video/videoPlay.css"/>
|
|
<style>
|
|
iframe {
|
|
background-color: #000000;
|
|
width: 97%;
|
|
height: 92%;
|
|
margin-left: 0.3%;
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
#details3 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#details3 span {
|
|
margin: 0 5px;
|
|
}
|
|
.layui-input {
|
|
background-color: rgb(0 0 0 / 0%);
|
|
color: white;
|
|
border-color: #2B7A8C;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="all-div">
|
|
<div class="video-left" id="video-left">
|
|
<!-- <div class="interfaceState">-->
|
|
<!-- <div class="title" onclick="interfaceStateClick()">-->
|
|
<!-- -->
|
|
<!-- </div>-->
|
|
<!-- <div class="request">-->
|
|
<!-- <span>请求数量 </span>-->
|
|
<!-- <span class="requestNum" id="requestNum" style="color: #30F7FF;"></span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="success">-->
|
|
<!-- <span>成功 </span>-->
|
|
<!-- <span class="successNum" id="successNum" style="color: #93FFB6;"></span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="error">-->
|
|
<!-- <span>异常 </span>-->
|
|
<!-- <span class="errorNum" id="errorNum" style="color: #FF2020;"></span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
|
|
<div class="PTZ_control" id="details1">
|
|
<!--<div class="PTZ_left">
|
|
<img id="remoteVideoBtn" src="../../img/video/localVideo.png" />
|
|
<img id="localVideoBtn" src="../../img/video/remoteVideo.png"/>
|
|
</div>-->
|
|
|
|
<div class="PTZ_center" >
|
|
<div></div>
|
|
<div class="upper" onmousedown="ptz('TurnUp')"
|
|
onmouseup="ptz('StopTurn');" title="上">
|
|
</div>
|
|
<div></div>
|
|
|
|
<div class="left" onmousedown="ptz('TurnLeft');"
|
|
onmouseup="ptz('StopTurn');" title="左">
|
|
</div>
|
|
<div></div>
|
|
<div class="right" onmousedown="ptz('TurnRight');"
|
|
onmouseup="ptz('StopTurn');" title="右">
|
|
</div>
|
|
|
|
<div></div>
|
|
<div class="lower" onmousedown="ptz('TurnDown');"
|
|
onmouseup="ptz('StopTurn');" title="下">
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="PTZ_right">
|
|
<div style="width: 28%;height: 21%;" id="yfocus" onmousedown="ptz('MakeFocusFar');" onmouseup="ptz('StopFocusMove');"></div>
|
|
<div style="width: 28%;margin-left: 5%;height: 21%;" id="jfocus" onmousedown="ptz('MakeFocusNear');" onmouseup="ptz('StopFocusMove');"></div>
|
|
<div style="width: 5%;height: 21%;"></div>
|
|
<div style="width: 28%;height: 21%;" id="snap" onclick="getPhoto()"></div>
|
|
|
|
<div style="width: 58%;">聚焦</div>
|
|
<div style="width: 10%;"></div>
|
|
<div style="width: 28%;margin-left:-4px;">抓拍</div>
|
|
|
|
<div style="width: 28%;height: 21%;" id="big" onmousedown="ptz('ZoomInPicture');" onmouseup="ptz('StopPictureZoom');"></div>
|
|
<div style="width: 28%;margin-left: 5%;height: 21%;" id="small" onmousedown="ptz('ZoomOutPicture');" onmouseup="ptz('StopPictureZoom');"></div>
|
|
<div style="width: 5%;height: 21%;" ></div>
|
|
<div style="width: 28%;height: 21%;display: none;" id="videotape" onclick="storageVideo()"></div>
|
|
|
|
<div style="width: 58%;">缩放</div>
|
|
<div style="width: 10%;"></div>
|
|
<div style="width: 30%;margin-left:-5px;display: none;">本地录像</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--<div class="PTZ_right" id="PTZ_right">-->
|
|
<!-- 远程抓拍 -->
|
|
<!--<img id="remoteSnapBtn" src="../../img/video/noselected/remoteCapture.png" />-->
|
|
<!-- 本地抓拍 -->
|
|
<!--<img id="localSnapBtn" src="../../img/video/noselected/locaCapture.png"/>-->
|
|
<!--</div>-->
|
|
|
|
</div>
|
|
<div class="device_list">
|
|
<div class="title">
|
|
<span id="videoSwitch">视频监控</span>
|
|
<div title="详情" onclick="dataClick()"></div>
|
|
</div>
|
|
|
|
<div class="contents">
|
|
<div class="searchTreeDiv">
|
|
<input class="dataText" id="keyWord" onkeydown="handleKeyDown(event)" type="text" />
|
|
<img class="imgSearch" id="imgSearch" src="../../img/video/search.png" style="width: 23px;">
|
|
</div>
|
|
|
|
<div class="layui-form-item" id="details3" style="display: none;">
|
|
<div class="layui-input-inline">
|
|
<input type="text" id="start-time" lay-verify="date" placeholder="请选择起始时间" autocomplete="off" class="layui-input">
|
|
</div>
|
|
<span>-</span>
|
|
<div class="layui-input-inline" style="margin-top: -10%;margin-left: 53%;">
|
|
<input type="text" id="end-time" lay-verify="date" placeholder="请选择结束时间" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="treeDiv">
|
|
<ul id="resourceTree" class="ztree roleTree" data-show-line="false"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- <div class="moveAlarm">-->
|
|
<!-- <div class="title">-->
|
|
<!-- <div>移动监测告警</div>-->
|
|
<!-- <div title="详情" onclick="deviceWarnClick()"></div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="table">-->
|
|
<!-- <div class="tableList" style="font-size: 14px;font-weight: 600">-->
|
|
<!-- <span>摄像头名称</span>-->
|
|
<!-- <span>告警信息</span>-->
|
|
<!-- <span>时间</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<!-- <div style="width:1%;height: 94.5%;float: left;"><img id="imgBtn" src="left_triangle.png" style="margin-top: 378px;width: 41px;"></div>-->
|
|
<div class="video-center" id="video-center">/
|
|
<div class="center_title">
|
|
<div class="center_num">
|
|
<div class="title">
|
|
<div>视频监控</div>
|
|
<div id="icon" style="display: none; margin-right: 46px">
|
|
<i class="layui-icon layui-icon-refresh-3" style="font-size: 30px; color: rgb(23, 203, 174);"></i>
|
|
</div>
|
|
<div class="center_num_center" id="center_num_center">
|
|
<img id="ballBtn1" onclick="ballOne()" class="imgNum" src="../../img/video/1_1.png"/>
|
|
<img id="ballBtn4" onclick="ballFour()" class="imgNum" src="../../img/video/4_1.png"/>
|
|
<img id="ballBtn9" onclick="ballNine()" class="imgNum" src="../../img/video/9_1.png"/>
|
|
|
|
<img id="closeVideo" onclick="stopVideo(null,null,2);" class="imgNum" src="../../img/video/close_1.png"/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 视频 -->
|
|
<iframe id="audioPlayer" style="display: none;"></iframe>
|
|
<!-- <div id="details5"><video id="audioPlayer" style="display: none;" controls></video></div>-->
|
|
|
|
<div class="video_window" id="videoWindow">
|
|
<div id="ball1" class="ballsplit content" ondblclick="doubleClick('1')" onclick="singleClick('1');" >
|
|
<video id="video1" class="video-js"></video>
|
|
</div>
|
|
<div id="ball2" class="ballsplit content" style="display: none;" ondblclick="doubleClick('2')" onclick="singleClick('2');" >
|
|
<video id="video2"></video>
|
|
</div>
|
|
<div id="ball3" class="ballsplit content" style="display: none;" ondblclick="doubleClick('3')" onclick="singleClick('3');" >
|
|
<video id="video3"></video>
|
|
</div>
|
|
<div id="ball4" class="ballsplit content" style="display: none;" ondblclick="doubleClick('4')" onclick="singleClick('4');" >
|
|
<video id="video4"></video>
|
|
</div>
|
|
<div id="ball5" class="ballsplit content" style="display: none;" ondblclick="doubleClick('5')" onclick="singleClick('5');" >
|
|
<video id="video5"></video>
|
|
</div>
|
|
<div id="ball6" class="ballsplit content" style="display: none;" ondblclick="doubleClick('6')" onclick="singleClick('6');" >
|
|
<video id="video6"></video>
|
|
</div>
|
|
<div id="ball7" class="ballsplit content" style="display: none;" ondblclick="doubleClick('7')" onclick="singleClick('7');" >
|
|
<video id="video7"></video>
|
|
</div>
|
|
<div id="ball8" class="ballsplit content" style="display: none;" ondblclick="doubleClick('8')" onclick="singleClick('8');" >
|
|
<video id="video8"></video>
|
|
</div>
|
|
<div id="ball9" class="ballsplit content" style="display: none;" ondblclick="doubleClick('9')" onclick="singleClick('9');" >
|
|
<video id="video9"></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas id="huaImg" style="display: none" ></canvas>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="../../js/core/jquery-3.6.0.js" type="text/javascript"></script>
|
|
<script src="../../js/video/jquery.json-2.4.js"></script>
|
|
<script src="../../js/core/layui2.7.6/layui.js"></script>
|
|
<script src="../../js/core/zTree/3.5/jquery.ztree.all.min.js" type="text/javascript"></script>
|
|
<!-- <script src="../../js/video/h5live-1.0.6.js"></script>
|
|
<script src="../../js/video/html2canvas.js"></script> -->
|
|
<!-- <script src="../../js/video/FileSaver.min.js"></script> -->
|
|
<script src="../../js/video/qx/include.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript" src="../../js/video/qx/conf.js"></script>
|
|
<script src="../../js/video/qx/utility/FileSaver.min.js"></script>
|
|
<script src="../../js/video/qx/utility/flv.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../../js/video/qx/utility/talk.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../../js/video/qx/video-7.19.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript" src="../../js/core/public.js" type="text/javascript"></script>
|
|
<!-- <script src="../../js/video/connection2.js" type="text/javascript" charset="utf-8"></script>-->
|
|
<!-- <script src="../../js/video/connection.js" type="text/javascript" charset="utf-8"></script>-->
|
|
<script src="../../js/video/connection_twoToken_two.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript" src="../../js/video/qxVideo.js" type="text/javascript"></script>
|
|
<!-- 流媒体服务加载及云台操作 -->
|
|
|
|
<!-- <script type="text/javascript" src="../../js/video/videoPlay.js" type="text/javascript"></script> -->
|
|
<!-- <script src="../../js/video/h5/csBall.js"></script> -->
|
|
</html> |