<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>智能机房管理平台-视频</title>
|
<meta name="keywords" content="智能机房管理平台">
|
<meta name="description" content="智能机房管理平台">
|
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="css/page/detail-video.css"/>
|
<style>
|
/** 隐藏列表下拉滚动条 **/
|
.scroll::-webkit-scrollbar {
|
display: none;
|
}
|
.videoType{
|
padding: 0 15px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
height: 32px;
|
border-radius: 3px;
|
background: #2f4050;
|
color: #9ea6b9;
|
border-width: 0px;
|
font-size: 16px;
|
font-weight: 700;
|
margin-top: 3px;
|
margin-right: 50px;
|
}
|
</style>
|
</head>
|
|
<body class="pdgxq-body">
|
<div class="i-container">
|
|
<div class="jmkt-main">
|
<div class="layui-fluid">
|
<div class="sp-boxWrap layui-row layui-col-space20">
|
<div class="layui-col-lg9 layui-col-md9">
|
<div class="pdgxq-m1-left sp-box">
|
<div class="pdgxq-H">
|
<h3><i></i>监控信息</h3>
|
</div>
|
<div class="sp-tab-bd">
|
<div class="sp-showBox layui-row show">
|
<div class="layui-col-lg6 layui-col-md6">
|
<div id="video1" class="sp-showItem ">
|
<img src="./images/sp-img.png" class="sp-hideImg"/>
|
<!-- <iframe id="myPlayer1" width="100%" height="100%"style="border-radius: 5px;"-->
|
<!-- src="http://127.0.0.1:8083/stream/player/摄像机1" ></iframe>-->
|
</div>
|
</div>
|
<div class="layui-col-lg6 layui-col-md6">
|
<div id="video2" class="sp-showItem ">
|
<img src="./images/sp-img.png" class="sp-hideImg"/>
|
<!-- <iframe id="myPlayer2" width="100%" height="100%"style="border-radius: 5px;"-->
|
<!-- src="http://127.0.0.1:8083/stream/player/摄像机2" ></iframe>-->
|
</div>
|
</div>
|
<div class="layui-col-lg6 layui-col-md6">
|
<div id="video3" class="sp-showItem ">
|
<img src="./images/sp-img.png" class="sp-hideImg"/>
|
<!-- <iframe id="myPlayer3" width="100%" height="100%"style="border-radius: 5px;"-->
|
<!-- src="http://127.0.0.1:8083/stream/player/摄像机3" ></iframe>-->
|
</div>
|
</div>
|
<div class="layui-col-lg6 layui-col-md6">
|
<div id="video4" class="sp-showItem ">
|
<img src="./images/sp-img.png" class="sp-hideImg"/>
|
<!-- <iframe id="myPlayer4" width="100%" height="100%"style="border-radius: 5px;"-->
|
<!-- src="http://127.0.0.1:8083/stream/player/摄像机4" ></iframe>-->
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div><!--pdgxq-m1-left end-->
|
|
<div class="layui-col-lg3 layui-col-md3">
|
<div class="pdgxq-m1-right sp-box">
|
<div class="pdgxq-H">
|
<h3><i></i>监控信息</h3>
|
</div>
|
|
<div>
|
<div style="margin: 20px 0px;">
|
<p style="color: #fff;margin: 10px;font-size: 16px;">视频1：</p>
|
<input type="text" id="test1" style="width: 280px;height: 32px;margin-left: 10px">
|
<button class="layui-btn layui-btn-normal"
|
onclick="startVideo('1');">确认
|
</button>
|
</div>
|
<div style="margin: 20px 0px;">
|
<p style="color: #fff;margin: 10px;font-size: 16px;">视频2：</p>
|
<input type="text" id="test2" style="width: 280px;height: 32px;margin-left: 10px">
|
<button class="layui-btn layui-btn-normal"
|
onclick="startVideo('2');">确认
|
</button>
|
</div>
|
<div style="margin: 20px 0px;">
|
<p style="color: #fff;margin: 10px;font-size: 16px;">视频3：</p>
|
<input type="text" id="test3" style="width: 280px;height: 32px;margin-left: 10px">
|
<button class="layui-btn layui-btn-normal"
|
onclick="startVideo('3');">确认
|
</button>
|
</div>
|
<div style="margin: 20px 0px;">
|
<p style="color: #fff;margin: 10px;font-size: 16px;">视频4：</p>
|
<input type="text" id="test4" style="width: 280px;height: 32px;margin-left: 10px">
|
<button class="layui-btn layui-btn-normal"
|
onclick="startVideo('4');">确认
|
</button>
|
</div>
|
</div>
|
|
|
</div>
|
</div><!--pdgxq-m1-left end-->
|
</div><!--sp-boxWrap end-->
|
</div>
|
</div><!--jmkt-main end-->
|
</div> <!--i-container end-->
|
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script>
|
function startVideo(number) {
|
var src = $("#test"+number).val();
|
var html = "<iframe id='myPlayer"+number+"' width='100%' height='100%' style='border-radius: 5px;'" +
|
"src='"+src+"'></iframe>";
|
$("#video"+number).html(html);
|
}
|
</script>
|
</body>
|
|
</html>
|
