<%@ 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="playvideo.css" /> 
		<!-- 播放视频的js控件  -->
		<script type="text/javascript" src="videojs/blockcacher.js"></script>
		<script type="text/javascript" src="videojs/blockutil.js"></script>
		<script type="text/javascript" src="videojs/globalvideoblock.js"></script>
		<script type="text/javascript" src='videojs/globalrecordblock.js'></script>
		<script type='text/javascript' src='videojs/PlanRtc.js'></script>
		<script type='text/javascript' src='videojs/ProgressBar.js'></script>
		 <script type="text/javascript" src="playvideo.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;
            overflow:hidden;
        }
        #playProgress{
            background-color: yellow;
            width: 0px;
            height: 14px;
        }
        #showProgress{
            font-size: 12px;
		   line-height: 11px;
		   color: white;
        }
        .pc-video-box{
        	height:auto !important;
        }
			 
		 </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="recordNav" style="cursor: pointer;" data-c="2" data-channel="" onclick="eventTabChange('recordDiv')">录像</li> 
			<li id="videoNav" style="cursor: pointer;" data-c="3" data-channel="" onclick="eventTabChange('videoDiv')">视频</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:block"> 回放视频
					<div class="pc-video-box">
						<div class="toCanvasBox" id="record" style="height:280px;">
						 	<video autoplay="" emptied="alert('emptied')" error="alert('error')" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
						</div>	
					</div>
				</div> -->
				
				<div class="pc-recordvideo" style="display:block"> <!-- 回放视频 -->
					<div class="pc-video-box">
						<div class="toCanvasBox"   style="height:280px;"  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  style="top: -16px;font-weight: bolder;background: black;position:absolute;z-index:20;    color: white;display:none;"  id="timeTip"></div>
				            </div> 
						</div>	
					</div>
					<div class="">
					</div>
				</div>
				
				
				<!-- <div class="pc-img" style="display:block">
					显示图片
					<div class="pc-img-topimg" style="box-shadow: 0 0 5px #a09f9f;">
						<img src="" alt="" width="430" height="280" onerror="javascript:$.loadErrorPic(this);"/>
					</div>
				</div> -->
	   		</div>
	   		<div class="div-info" style="margin-left: 18px;border:0px solid #ff00ff;">
	   		
	   			<div  style="height:40px;line-height:40px;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-datetimespinner" id="searchDate" data-options="formatter:formatter1,parser:parser1"  value="6/24/2014" style="width:180px;">
	   			</div>
	   			
	   			<a href="#" class="easyui-linkbutton c1" id="searchVideo" style="width:120px;margin-top:15px;">搜索录像</a>
	   			<!-- 
	   			 <ul class="info-ul"> 
	   				显示右侧告警文字信息和按钮
	   				<li>任务名称：<span id="taskname"></span></li>
	   				<li>任务类型：<span id="tasktypename"></span></li>
					<li>通道名称：<span id="channelname"></span></li>
					<li>告警类型：<span id="videostatusname"></span></li>
					<li>告警原因：<span id="failurecause"></span></li>
					<li>标记状态：<span id="videolabelstatusname"></span></li>
					<li>执行状态：<span id="runstatusname"></span></li>
					<li>执行时间：<span id="runtime"></span></li>
	   			</ul>
	   			 -->
	   		</div>
	   	</div>
	</div>
		<script type="text/javascript">
				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>
	</body>
</html>	
