ztpt-sgyzt
/
sgyzt-front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		#container {
			width: 50%;
			height:500px;
			margin-left:10px;
			margin: 20px auto;
			z-index: -1;
		}
		button{
			background-color: #008CBA;
			color: white;
			margin-left:10px;
			border: none;
		}
	</style>
	<link rel="stylesheet" href="../../../../public/layui/css/layui.css">
</head>

<body>
	<script type="text/javascript" src="../../../../public/kmedia/kmedia.js"></script>
	<script src="../../../../public/layui/layui.js"></script>
	<div id="container">
	<div style="margin:1px">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：摄像头名称</div>
	<br/>
	<div style="margin:1px">位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置：摄像头位置名称</div>
	<br/>
	<div style="margin:1px">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：123456678</div>
	<br/>
	<div style="margin:1px">所属机构：海口市xxx公安局</div>
	<br/>
	<div style="margin:1px"><table><tr><td>时间选择：</td><td><input type="text" class="layui-input" id="startDate" style="width:200px"></td><td>&nbsp;&nbsp;至&nbsp;&nbsp;</td><td><input type="text" class="layui-input" id="endDate" style="width:200px"></td><td>&nbsp;&nbsp;&nbsp;&nbsp;<button id="searchbtn" type="button" class="layui-btn" onclick="searchVedio()">查询</button></td></tr></table></div>
	<br/>
	</div>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#startDate' //指定元素
	,type: 'datetime'
  });
    //执行一个laydate实例
  laydate.render({
    elem: '#endDate' //指定元素
	,type: 'datetime'
  });
});
</script>
</body>
<script>
	'use strict';

	var kmedia = new KMedia({
		selector: '#container',
		mediaUrl: './static/demo.mp4',
		mediaType: 'video',
		// serviceUrl: './config.json',
		// 注意播放类型修改为实时流模式
		// playType: 'liveStreaming',
		playType: 'nonLiveStreaming',
		// playType: 'file',
		progressDisplayTime: false,
		// fileEncrypt: 'aes128',
		theme: 'blue',
		autoplay: true,
		restore: true,
		tools: ['play', 'volume', 'requestFullscreen'],
		loading: {
			beforeStream: '初始化中',
			beforePicture: '视频加载中',
			timeout: '视频加载已超时'
		},
		mediaInfo: {
			file: {
			},
			liveStreaming: {
			},
			nonLiveStreaming: {
				websocketUrl: 'wss://59.212.10.159',
				devId: '46902461001321000003',
				startTime: '2020-04-21 13:00:00',
				endTime: '2020-04-21 14:00:00'
			}
		},
		onload: function () {

		}
	});

function searchVedio(){

	if(document.getElementById("startDate").value == '' || document.getElementById("endDate").value == ''){
		alert('查询日期不能为空！')
		return;
	}
	var start_date=document.getElementById("startDate").value
	var end_date=document.getElementById("endDate").value
	//alert(start_date+";"+end_date)
	kmedia.nonLiveStreaming({
		websocketUrl: 'wss://59.212.10.159',
		devId: '46902461001321000003',
		startTime: start_date,
		endTime: end_date
	})
}

</script>

</html>