141 lines
6.5 KiB
HTML
141 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>视频</title>
|
|
<link href="newVideoPage.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="newVideoPage.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
|
|
<style type="text/css">
|
|
button {
|
|
border: none;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-body {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: 98%;
|
|
}
|
|
.card-body {
|
|
flex: 1 1 auto;
|
|
padding: 0rem 0rem;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="card">
|
|
<!-- <div class="card-header" style="text-align:center;width:100%">
|
|
<img id="return" style="width:7%;float:left;margin-top:0.5rem;" src="img/video/fanhui.png" alt="返回"/>
|
|
<p class="text-center" style="font-size:20px;display:inline-block;margin:0 auto;">
|
|
作业票视频</p>
|
|
</div> -->
|
|
<div class="card-body">
|
|
<div id="windowBox" style="position:relative">
|
|
<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>
|
|
<div class="card-footer" style="height:21%;position:absolute;width: 12%; left: 87%;top: 5%;" >
|
|
<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:25%;">
|
|
<button id="zoomin"
|
|
style="margin: 0 auto;background: url('img/video/fangda.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:25%;">
|
|
<button id="zoominout"
|
|
style="margin: 0 auto;background: url('img/video/suoxiao.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:25%;">
|
|
<button id="near"
|
|
style="margin: 0 auto;background: url('img/video/yuanJiao.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
<div class="div" style="width:25%;">
|
|
<button id="faraway"
|
|
style="margin: 0 auto;background: url('img/video/jinJiao.png') no-repeat;background-size: 100% 100%;width:70%"></button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<canvas id="canvas" style="display:none;"></canvas>
|
|
</body>
|
|
</html>
|
|
|