监控视频页面

最新推荐文章于 2024-09-12 00:33:30 发布

goodyatou

最新推荐文章于 2024-09-12 00:33:30 发布

阅读量231

点赞数

文章标签：音视频 css html

本文链接：https://blog.csdn.net/goodyatou/article/details/128223072

版权

工作专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>观看视频</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/jsmpeg.min.js"></script>
<style>
* {
font-size: 14px;
}

.seewrap {
background-color: #f5f5f5;
border-radius: 10px 10px 0 0;
min-height: 300px;
padding: 20px;
margin-top: -10px;
}

.seetitle {
font-size: 16px;
font-weight: bold;
}

.errmsg {
color: red;
}

.logwrap {
display: flex;
justify-content: space-between;
vertical-align: middle;
align-items: center;
}

.monitorwrap {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 100%;
min-height: 300px;
background-color: black;
padding-bottom: 20px;
}

.nodata {
text-align: center;
margin-top: 40px;
}

.grow-item {
display: flex;
justify-content: space-between;
}

.grow-item .time-line {
position: relative;
height: auto;
padding: 8px 17px;
border-left: 1px solid #e5e6e9;
}

.grow-item:last-child .time-line:after {
content: '';
position: absolute;
bottom: 0;
left: -7px;
width: 14px;
height: 17px;
border-radius: 5px;
background-color: #e5e6e9;
transform: perspective(4px) rotateX(12deg);
}

.grow-item .time-line .time-line-dot {
position: absolute;
left: -7px;
width: 10px;
height: 10px;
top: 12px;
background-color: #ffffff;
border-radius: 50%;
border: solid 1px #d2d3d4;
}

.grow-item .time-line .time-line-dot::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f49f16;
}

.grow-item .time-line .time-line-title {
font-weight: bold;
color: #171f31;
line-height: 23px;
}

.grow-item .time-line .time-line-cont {
font-size: 14px;
color: #353f57;
line-height: 20px;
}

.loadbg {
text-align: center;
color: #ffffff;
}
</style>
<script>

//取得cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';'); //把cookie分割成组
for (var i = 0; i < ca.length; i++) {
var c = ca[i]; //取得字符串
while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格
c = c.substring(1, c.length); //有的话，从第二位开始取
}
if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值
}
}
return false;
}

//设置cookie
function setCookie(name, value, seconds) {
seconds = seconds || 0; //seconds有值就直接赋值，没有为0，这个根php不一样。
var expires = "";
if (seconds != 0) { //设置cookie生存时间
var date = new Date();
date.setTime(date.getTime() + (seconds * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + escape(value) + expires + "; path=/"; //转码并赋值
}

if (e.lstLog.length == 0) {
$("#divlog").html(` <p class="nodata">暂无观看记录</p>`);
} else {
var strlog = '';
var obj = e.lstLog;
$.each(obj, function (n, value) {
strlog += ` <div class="grow-item"> <div class="time-line"> <div class="time-line-dot"></div> <div class="time-line-title">${value.AddTime}</div><div class='time-line-cont' >观看宝宝监控</div></div></div>`;
});

$("#divlog").html(strlog);
}
} else {
console.log(e.ResultMessage);
$(".errmsg").html(e.ResultMessage);
$("#divlog").html(` <p class="nodata">暂无观看记录</p>`);
}
}
});
});

function show() {

if (player.isPlaying == true && player.currentTime > 0) {
$("#video-canvas").show();
$(".loadbg").hide();
}
else {
setTimeout("show()", 1000);
}
}
</script>
</head>
<body style="margin:0 auto;">

<input type="hidden" id="hidisload" name="hidisload" />
<input type="hidden" id="hidbabykey" name="hidbabykey" />
<input type="hidden" id="hidIp" name="hidIp" />
<input type="hidden" id="hidkey" name="hidkey" />
<input type="hidden" id="hidIPkey" name="hidIPkey" />
<div class="monitorwrap">
<div class="loadbg">
<img src="/images/loading2.gif" />
<p>视频加载中...</p>
</div>