170 lines
7.9 KiB
HTML
170 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>现场视频</title>
|
|
<link href="videoPage.css" rel="stylesheet" type="text/css"/>
|
|
<link href="js/utility/video/video-7.19.1-js.min.css" rel="stylesheet" type="text/css"/>
|
|
<!-- 新 Bootstrap5 核心 CSS 文件 -->
|
|
<link rel="stylesheet" href="js/bootstrap.min.css">
|
|
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
|
|
<script type="text/javascript" src="js/conf.js?v=211121211"></script>
|
|
<script type="text/javascript" src="js/include.js?v=2221111"></script>
|
|
<script type="text/javascript" src="js/layer-v3.1.0/layer/layer.js"></script>
|
|
<script type="text/javascript" src="js/utility/video/video-7.19.1.min.js"></script>
|
|
<script src="js/flv.js"></script>
|
|
<script src="js/utility/talk.js"></script>
|
|
<script src="js/h5live-1.0.6.js"></script>
|
|
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
|
|
<script src="js/aes.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="js/FileSaver.min.js"></script>
|
|
<script src="videoQX.js" type="text/javascript"></script>
|
|
<script src="videoPage.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
|
|
<style type="text/css">
|
|
/* button {
|
|
border: none;
|
|
height: 100%;
|
|
} */
|
|
|
|
.card-body {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: 40vh;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="card">
|
|
<div class="card-header layout" style="text-align:center;width:100%">
|
|
<img id="return" style="width:7%;float:left;margin:0.5rem 0 0 1rem;" src="img/video/fanhui.png" alt="返回"/>
|
|
<p class="text-center" style="font-size:2rem;line-height: 2rem;display:inline-block;margin:0 auto;">
|
|
现场视频</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="windowBox">
|
|
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
|
|
style="object-fit: fill"></video>
|
|
<!--信息层-->
|
|
<div class="tip"
|
|
style="position: absolute;top: 0px; width: 100%;background-color: darkgray;height: 40px;opacity:0.6 ;display: none;">
|
|
<div title="无视频"
|
|
style="left: 2px;margin-top: 4px;float: left;width: 75%;overflow: hidden;font-family: Microsoft YaHei;text-overflow: ellipsis;text-indent:5px;color: aliceblue">
|
|
无视频
|
|
</div>
|
|
<div style="float: right;color: aliceblue;margin-right: 8px;margin-top: 4px;">关闭</div>
|
|
</div>
|
|
<!--加载层-->
|
|
<div style="position: absolute;top: 50%; width: 100%;background-color: darkgray;height: 40px;opacity:0.5;display: none;">
|
|
<div style="color: aliceblue;text-align: center;"> 正在建立连接....</div>
|
|
</div>
|
|
<!--操作层-->
|
|
<div class="tip"
|
|
style="position: absolute;bottom: 0px; width: 100%;background-color: darkgray;height: 40px;opacity:0.5;line-height: 40px;display: none;">
|
|
<div style="color: aliceblue;text-align: center;float: left;">录像</div>
|
|
<div style="color: aliceblue;text-align: center;float: left;"> 抓拍</div>
|
|
<div style="color: aliceblue;text-align: center;float:right;">全屏</div>
|
|
</div>
|
|
</div>
|
|
<div id="xz-btn">
|
|
<button onclick="videoFullscreen()"></button>
|
|
</div>
|
|
<div id="oper-box" class="layout">
|
|
<button id="zoomin"></button>
|
|
<button id="zoominout"></button>
|
|
<button id="near"></button>
|
|
<button id="faraway"></button>
|
|
<button onclick="shot()"></button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-footer" style="width: 100%;height:55vh">
|
|
<div id="platform-box" class="layout">
|
|
<div class="layout">
|
|
<button id="left"></button>
|
|
</div>
|
|
<div class="layout">
|
|
<button id="up"></button>
|
|
<button id="down"></button>
|
|
</div>
|
|
<div class="layout">
|
|
<button id="right"></button>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<!-- 必须包含在：.row容器里面 -->
|
|
<!-- <div class="row">
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="up"
|
|
style="background: url('img/video/shang.png') no-repeat;background-size: 100% 100%;width:100%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="left"
|
|
style="background: url('img/video/zuo.png') no-repeat;background-size: 100% 100%;width:100%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="right"
|
|
style="background: url('img/video/you.png') no-repeat;background-size: 100% 100%;width:100%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="down"
|
|
style="background: url('img/video/xia.png') no-repeat;background-size: 100% 100%;width:100%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;"></div>
|
|
<div class="div" style="width:20%;"></div>
|
|
</div>
|
|
<div class="row" style="margin-top:10%">
|
|
<div class="div" style="width:20%;">
|
|
<button id="zoomin"
|
|
style="display: block;margin: 0 auto;background: url('img/video/fangda.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="zoominout"
|
|
style="display: block;margin: 0 auto;background: url('img/video/suoxiao.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="near"
|
|
style="display: block;margin: 0 auto;background: url('img/video/yuanJiao.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;">
|
|
<button id="faraway"
|
|
style="display: block;margin: 0 auto;background: url('img/video/jinJiao.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:20%;">
|
|
<button style="display: block;margin: 0 auto;background: url('img/video/jiePing.png') no-repeat;background-size: 100% 100%;width:70%"
|
|
onclick="shot()"></button>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div style="margin-top: 20px;">
|
|
<p id="hint" style="text-align:center;color:red;display:none;">执行成功,请等待球机响应.....</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas id="canvas" style="display:none;"></canvas>
|
|
<script type="text/javascript">
|
|
let width = document.documentElement.clientWidth,
|
|
height = document.documentElement.clientHeight,
|
|
style = "";
|
|
alert(width);
|
|
alert(height);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|