<!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 class="sp-tab-hd">
|
<select id="select_type" class="videoType">
|
<option value="IN">VLC内网播放</option>
|
<option value="OUT">VLC外网播放</option>
|
<option value="WEB">Web直播访问</option>
|
</select>
|
<span><img src="./images/sp-tabImg2.png"/></span>
|
<span class="active"><img src="./images/sp-tabImg1.png"/></span>
|
</div>
|
</div>
|
<div class="sp-tab-bd">
|
<div class="sp-showBox layui-row">
|
<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 class="sp-showBox layui-row show">
|
<div class="layui-col-lg12 layui-col-md12">
|
<div id="video0" class="sp-showItem2 ">
|
<!-- <video id="myPlayer" width="100%" height="100%" poster="" controls playsInline webkit-playsinline>-->
|
<!-- <source src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4"/>-->
|
<!-- <source src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4" type="application/x-mpegURL"/>-->
|
<!-- </video>-->
|
<!-- <img src="./images/sp-img.png" class="sp-hideImg"/>-->
|
|
<!-- <object type="application/x-vlc-plugin" id="video-1" events="true" width="100%" height="100%"-->
|
<!-- pluginspage="http://www.videolan.org" codebase="./plugins/vlc/npapi-vlc-2.2.2.tar.xz">-->
|
<!-- <param name="mrl" value="rtsp://admin:a1234567@192.168.1.199:554/h264/ch1/main/av_stream"/>-->
|
<!-- <param name="volume" value="50"/>-->
|
<!-- <param name="autoplay" value="true"/>-->
|
<!-- <param name="loop" value="false"/>-->
|
<!-- <param name="fullscreen" value="true"/>-->
|
<!-- <param name="toolbar" value="false"/>-->
|
<!-- </object>-->
|
|
|
<!-- <iframe class="J_iframe" id="myPlayer" name="iframe0" width="100%" height="100%"-->
|
<!-- src=""-->
|
<!-- frameborder="0" data-id="" seamless style="border-radius: 5px;" ></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 class="sp-cz-wrap">
|
<div class="sp-cz-box">
|
<ul>
|
<li class="sp-cz-l1">
|
<a href="javascript:void(0)"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l2">
|
<a href="javascript:void(0)" onmousedown="action(2);"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l3">
|
<a href="javascript:void(0)"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l4">
|
<a href="javascript:void(0)" onmousedown="action(0);"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l5">
|
<!-- <a href="javascript:void(0)"><img src="./images/sp-arrow.png"/></a>-->
|
</li>
|
<li class="sp-cz-l6">
|
<a href="javascript:void(0)" onmousedown="action(1);"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l7">
|
<a href="javascript:void(0)"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l8">
|
<a href="javascript:void(0)" onmousedown="action(3);"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
<li class="sp-cz-l9">
|
<a href="javascript:void(0)"><img src="./images/sp-arrow.png"/></a>
|
</li>
|
</ul>
|
</div>
|
<div class="sp-bianbei">
|
<button type="button" class="sp-sxBtn sp-czBtn"
|
onmousedown="action(6);" onmouseup="action(7);"><i>－</i></button>
|
<span>变倍</span>
|
<button type="button" class="sp-fdBtn sp-czBtn"
|
onmousedown="action(5);" onmouseup="action(7);"><i>＋</i></button>
|
</div>
|
</div><!--sp-cz-wrap end-->
|
|
<div class="sp-table-box">
|
|
<div class="sp-table-tit">
|
<h3>视频列表</h3>
|
<span id="videoNum">当前共有12个视频监控</span>
|
</div>
|
|
<div class="sp-table scroll">
|
<ul id="videoList" class="sp-list">
|
<!-- <li>-->
|
<!-- <a href="javascript:void(0)">-->
|
<!-- <img src="./images/qiangji.png"/>-->
|
<!-- <p>视频监控1</p>-->
|
<!-- </a>-->
|
<!-- </li>-->
|
</ul>
|
</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 src="./plugins/layui/layui.js"></script>
|
<script src="./js/constant.js"></script>
|
<script src="./plugins/EZUIKit/ezuikit.js"></script>
|
<script src="./js/page/detail-video.js"></script>
|
|
</body>
|
|
</html>
|
