210 lines
7.3 KiB
Plaintext
210 lines
7.3 KiB
Plaintext
|
<!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="videoPage.js" type="text/javascript"></script>
|
||
|
|
</head>
|
||
|
|
<style type="text/css">
|
||
|
|
button {
|
||
|
|
border: none;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 100vw; /*2.利用 vh 重置 ‘宽度’ */
|
||
|
|
height: 100vh; /* 3.利用 vw 重置 ‘高度’ */
|
||
|
|
top: 0;
|
||
|
|
left: 100vw; /* 4.旋转后页面超出屏幕，重置页面定位位置 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowBox {
|
||
|
|
z-index: 100;
|
||
|
|
width: 100vh;
|
||
|
|
height: 100vw;
|
||
|
|
object-fit: fill;
|
||
|
|
}
|
||
|
|
|
||
|
|
#video_html5_api {
|
||
|
|
z-index: 100;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: fill; /*这里是关键*/
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-dimensions {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.row {
|
||
|
|
background-color: rgb(10, 88, 202);
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1000;
|
||
|
|
visibility: hidden;
|
||
|
|
--bs-gutter-x: 0 !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<div id="windowBox" ondblclick="closeWindow()">
|
||
|
|
<video id="video" style="width: 100%; height: 100%" autoplay controls preload="none"></video>
|
||
|
|
</div>
|
||
|
|
<div style="z-index: 1001; position: absolute;right: 0">
|
||
|
|
<p id="hint" style="text-align:center;color:red;z-index: 1001;transform: rotate(90deg);display:none;">
|
||
|
|
执行成功,请等待球机响应.....</p>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="div col-2">
|
||
|
|
<button style="visibility: hidden;transform: rotate(90deg);display: block;margin: 0 auto;background: url('svg/fd.svg') no-repeat;background-size: 100% 100%;width:60%"></button>
|
||
|
|
</div>
|
||
|
|
<div class="div col-2">
|
||
|
|
<button id="near"
|
||
|
|
style="transform: rotate(90deg);display: block;margin: 0 auto;background: url('svg/yj.svg') no-repeat;background-size: 100% 100%;width:60%"></button>
|
||
|
|
</div>
|
||
|
|
<div class="div col-2">
|
||
|
|
<button id="faraway"
|
||
|
|
style="transform: rotate(90deg);display: block;margin: 0 auto;background: url('svg/jj.svg') no-repeat;background-size: 100% 100%;width:60%"></button>
|
||
|
|
</div>
|
||
|
|
<div class="div col-2">
|
||
|
|
<button id="zoomin"
|
||
|
|
style="transform: rotate(90deg);display: block;margin: 0 auto;background: url('svg/fd.svg') no-repeat;background-size: 100% 100%;width:60%"></button>
|
||
|
|
</div>
|
||
|
|
<div class="div col-2">
|
||
|
|
<button id="zoominout"
|
||
|
|
style="transform: rotate(90deg);display: block;margin: 0 auto;background: url('svg/sx.svg') no-repeat;background-size: 100% 100%;width:60%"></button>
|
||
|
|
</div>
|
||
|
|
<div class="div col-2">
|
||
|
|
<button style="visibility: hidden;transform: rotate(90deg);display: block;margin: 0 auto;background: url('svg/fd.svg') no-repeat;background-size: 100% 100%;width:60%"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('#video_html5_api').removeClass('video-dimensions')
|
||
|
|
let detectOrient = function () {
|
||
|
|
let width = document.documentElement.clientWidth,
|
||
|
|
height = document.documentElement.clientHeight,
|
||
|
|
style = "";
|
||
|
|
if (width >= height) { // 横屏
|
||
|
|
style += "-webkit-transform: rotate(0); transform: rotate(0);";
|
||
|
|
style += "-webkit-transform-origin: 0 0;";
|
||
|
|
style += "transform-origin: 0 0;";
|
||
|
|
} else { // 竖屏
|
||
|
|
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
|
||
|
|
// 注意旋转中点的处理
|
||
|
|
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
|
||
|
|
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
|
||
|
|
}
|
||
|
|
$('#windowBox')[0].style.cssText = style;
|
||
|
|
};
|
||
|
|
window.onresize = detectOrient;
|
||
|
|
detectOrient();
|
||
|
|
|
||
|
|
function closeWindow() {
|
||
|
|
window.history.back(-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
let startx, starty;
|
||
|
|
|
||
|
|
//获得角度
|
||
|
|
function getAngle(angx, angy) {
|
||
|
|
return Math.atan2(angy, angx) * 180 / Math.PI;
|
||
|
|
}
|
||
|
|
|
||
|
|
//根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件
|
||
|
|
function getDirection(startx, starty, endx, endy) {
|
||
|
|
let angx = endx - startx;
|
||
|
|
let angy = endy - starty;
|
||
|
|
let result = 0;
|
||
|
|
|
||
|
|
//如果滑动距离太短
|
||
|
|
if (Math.abs(angx) < 20 && Math.abs(angy) < 20) {
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
|
||
|
|
let angle = getAngle(angx, angy);
|
||
|
|
if (angle >= -135 && angle <= -45) {
|
||
|
|
result = 1;
|
||
|
|
} else if (angle > 45 && angle < 135) {
|
||
|
|
result = 2;
|
||
|
|
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
|
||
|
|
result = 3;
|
||
|
|
} else if (angle >= -45 && angle <= 45) {
|
||
|
|
result = 4;
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
|
||
|
|
//手指接触屏幕
|
||
|
|
document.addEventListener("touchstart", function (e) {
|
||
|
|
startx = e.touches[0].pageX;
|
||
|
|
starty = e.touches[0].pageY;
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
//手指离开屏幕
|
||
|
|
document.addEventListener("touchend", function (e) {
|
||
|
|
let endx, endy;
|
||
|
|
endx = e.changedTouches[0].pageX;
|
||
|
|
endy = e.changedTouches[0].pageY;
|
||
|
|
let direction = getDirection(startx, starty, endx, endy);
|
||
|
|
switch (direction) {
|
||
|
|
case 0:
|
||
|
|
if (starty < document.documentElement.clientHeight - $(".row")[0].clientHeight) {
|
||
|
|
if ($(".row").css("visibility") != "hidden") {
|
||
|
|
$(".row").css("visibility", "hidden");
|
||
|
|
} else {
|
||
|
|
$(".row").css("visibility", "visible");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
control(3);
|
||
|
|
setTimeout("control(0)", 1000);
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
control(4);
|
||
|
|
setTimeout("control(0)", 1000);
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
control(2);
|
||
|
|
setTimeout("control(0)", 1000);
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
control(1);
|
||
|
|
setTimeout("control(0)", 1000);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
if (starty < 400) {
|
||
|
|
if ($(".row").css("visibility") != "hidden") {
|
||
|
|
$(".row").css("visibility", "hidden");
|
||
|
|
} else {
|
||
|
|
$(".row").css("visibility", "visible");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}, false);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|