<%@ 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"%>
		<link rel="stylesheet" type="text/css" href="../../videoalarm/itemPage/css/mapDialog.css" /> 
		<!-- 播放视频的js控件  -->
		<script type="text/javascript" src="../../common/js/video/blockcacher.js"></script>
		<script type="text/javascript" src="../../common/js/video/blockutil.js"></script>
		<script type="text/javascript" src="../../common/js/video/globalvideoblock.js"></script>
		<script type="text/javascript" src='../../common/js/video/globalrecordblock.js'></script>
		<script type='text/javascript' src='../../common/js/video/PlanRtc.js'></script>
		<script type='text/javascript' src='../../recordalarm/ywrecordcurrentstate/playvideo/videojs/ProgressBar.js'></script>
		 <script type="text/javascript" src="detailVideoHistory.js"></script>
		 <style type="text/css">
			 .info-ul{margin-top:0 !important;}
			 #videoControls{
            width: 430px;
            margin-top: 0px;
            height: 14px;
        }
        .show{
            opacity: 1;
        }
        .hide{
            opacity: 0;
        }
        #progressWrap{
            background-color: #73859f;
            height: 14px;
            cursor: pointer;
        }
        #playProgress{
            background-color: yellow;
            width: 0px;
            height: 14px;
        }
        #showProgress{
            font-size: 12px;
		   line-height: 11px;
		   color: white;
        }
        .pc-video-box{
        	height:auto !important;
        }
        .pc-video{
	float: left;
    /*box-shadow: 0 0 5px #a09f9f;*/
    margin: 3px 1px 1px 1px;
}
.pc-recordvideo{
	float: left;
    /*box-shadow: 0 0 5px #a09f9f;*/
    margin: 3px 1px 1px 1px;
}
.pc-video-box{
	float: left;
    box-shadow: 0 0 5px #a09f9f;
    padding: 1px 1px 1px 1px;
    width: 430px;
    height: 300px;
	/*border: 1px solid #969393;*/
}
.toCanvasBox {
    position: relative;
    width: 430px;
    height: 300px;
}
		 </style>
	</head>
	<body id="bodybody" class="easyui-layout"  data-options="onBeforeClose:function(){alert(1)}">
	<div>
		<ul ID="event_tab_div" class="div-img-title" data-query="">
			<li id="pictureNav" style="cursor: pointer;" class="active" data-c="1" data-channel="" onclick="eventTabChange('eventDiv')">图片</li>
			<li id="videoNav" style="cursor: pointer;" data-c="3" data-channel="" onclick="eventTabChange('videoDiv')">视频</li>
			<li id="recordNav" style="cursor: pointer;" data-c="2" data-channel="" onclick="eventTabChange('recordDiv')">录像</li> 
		</ul>
	</div>
	<div id="eventDiv" title="" style="border:0px solid #ff00ff;" >
	   	<div class="dialog-top" style='border:0px solid #ff00ff;'>
	   		<div class="div-img">
	   			<div class="pc-video" style="display:none"> <!-- 显示视频 -->
					<div class="pc-video-box">
						<div class="toCanvasBox" id="video"  style="height:280px;">
						 	<!--在线播放视频 -->
							 <video autoplay="" emptied="alert('emptied')" error="alert('error')" class="canvasVideo" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
						</div>	
					</div>
				</div>
				<div class="pc-recordvideo" style="display:none"> <!-- 回放视频 -->
					<div class="pc-video-box">
						<div class="toCanvasBox" id="record" style="height:280px;" 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  style="top: -16px;font-weight: bolder;background: black;position:absolute;z-index:20;    color: white;display:none;"  id="timeTip"></div>
				            </div> 
						</div>	
					</div>
					
				</div>
				<div class="pc-img" style="display:block">
					<!-- 显示图片 -->
					<div class="pc-img-topimg" style="box-shadow: 0 0 5px #a09f9f;">
						<img width="430" height="280" onerror="javascript:$.loadErrorPic(this);"/>
					</div>
				</div>
	   		</div>
	   		<div class="div-info" style="margin-left: 18px;border:0px solid #ff00ff;">
	   			<ul class="info-ul"> 
	   				<!-- 显示右侧告警文字信息和按钮 -->
					<li>通道名称：<span id="channelname"></span></li>
					<li>设备编号：<span id="videonum"></span></li>
					<li>通道编号：<span id="channelnum"></span></li>
					<li>设备IP：<span id="sbip"></span></li>
					<li>厂家名称：<span id="cjmc"></span></li>
					<!-- <li>当前状态：<span id="currentstate"></span></li> -->
	   			</ul>
		   			  <div id="recordBtn" style="display:none;">
						   <div  style="height:24px;line-height:24px;color:#080b7c;font-weight:bold;">
		   							<!-- <span  id="tdmc">高架桥</span>&nbsp;&nbsp;&nbsp;[<span id="tdbh">20181101</span>] -->
				   			</div>
				   			<div style="width:90px;">
				   				<input class="easyui-datebox"   type="text" id="searchDate" style="width:180px;">
				   			</div>
				   			<span href="#"  id="searchVideo"  onclick="searchVideo()" style="    display: block; width: 82px;height: 30px;line-height: 30px;margin-top: 16px;color: white;background-color: #67c23a;text-align: center;cursor:pointer;">搜索录像</span>
					  </div>
	   		</div>
	   	</div>
	</div>
	</body>
</html>	
<script>
function formatter1(date){
	if (!date){return '';}
	return $.fn.datebox.defaults.formatter.call(this, date);
}
function parser1(s){
	if (!s){return null;}
	return $.fn.datebox.defaults.parser.call(this, s);
}
</script>