<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
		<%@include file="../../../frame/assets/header-all.jsp"%>
		<script type="text/javascript" src="<%=basePath%>/yw/common/js/video/blockcacher.js"></script>
		<script type="text/javascript" src="<%=basePath%>/yw/common/js/video/blockutil.js"></script>
		<script type="text/javascript" src='<%=basePath%>/yw/common/js/video/globalrecordblock.js'></script>
		<script type='text/javascript'  src='<%=basePath%>/yw/common/js/video/PlanRtc.js'></script>
		<script type='text/javascript'  src='<%=basePath%>/yw/recordalarm/ywrecordcurrentstate/playvideo/videojs/ProgressBar.js'></script>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/yw/homepage/alarmdetail/alarmDetail.css"/>
		<style>
			body{display:flex;justify-content:center;padding-top: 20px;}
			#videoControls{ height: 20px; width:100%;padding:0 2px; }
			#progressWrap{background-color: #73859f;height: 20px;cursor: pointer;    overflow: hidden;}
			#playProgress{background-color: yellow;width: 0px; height: 20px;}
			#showProgress{font-size: 12px;line-height: 20px;padding-left: 10px;color: white;font-weight:bold;}
			#timeTip{font-weight: bolder;background: black;position:absolute;height:14px;line-height:14px;z-index:20;color: white;display:none;}
		</style>
		<script type="text/javascript"  src="ywrepairjobRecord.js"></script>
	</head>
	<body>
<div style="display:flex;">
	   <div title="录像"   style="width:490px;height:300px;display:block;">
    	<div style="width:100%;height:100%;position:relative;"   id="record"  onmouseover="ProgressBar.showVideoControls(event,'over')"   onmouseout="ProgressBar.showVideoControls(event,'out');">
		 	<!--录像视频 -->
		 	<video  onprogress="ProgressBar.progress(this);"  autoplay="" emptied="alert('emptied')" error="alert('error')" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
	            <div id="videoControls"  style="position: absolute; bottom:0;display:none;"  > 
                <div id="progressWrap"  onclick="ProgressBar.sendMsg(event);" onmouseout ="ProgressBar.showTimeTip(event,'out');" onmousemove ="ProgressBar.showTimeTip(event,'over');">  
                    <div id="playProgress">  
                        <span id="showProgress">0%</span> 
                    </div>
                </div>
	            <div id="timeTip"></div>
            </div> 
    	</div>
    </div>
		<div class="alarm-info">
                     <div  style="height:40px;line-height:40px;color:#080b7c;font-weight:bold;display:none;">
	   					<span  id="tdmc" style="display:none;">高架桥</span>&nbsp;&nbsp;&nbsp;[<span id="tdbh" style="display:none;">20181101</span>]
	   			</div>
	   			<div style="width:90px;">
	   				<input class="easyui-datebox"   id="searchDate"   type="text"  style="width:180px;">
	   			</div>
	   			
	   			<span href="#"  id="searchVideo" onclick="searchVideo()" style="display: block;text-align: center;line-height: 30px;width:120px;margin-top:15px;background-color:#67c23a !important;color:white;cursor:pointer;">搜索录像</span>
		</div>
</div>
	    
	</body>
</html>	
