You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

353 lines
18 KiB
HTML

1 week ago
<!doctype html>
<html>
<head>
<title>录像播放</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta http-equiv="Expires" content="0"/>
<link rel="stylesheet" type="text/css" href="../video/css/video-js.min.css"/>
<link rel="stylesheet" type="text/css" href="../css/pintuer.css"/>
<script language="javascript" src="../script/jquery.js" type="text/javascript"></script>
<script language="javascript" src="../script/jquery.bs.js" type="text/javascript"></script>
<script language="javascript" src="../script/pintuer.js" type="text/javascript"></script>
<script language="javascript" src="../script/common.js" type="text/javascript"></script>
<script language="javascript" src="../video/js/video.min.js"></script>
<script language="javascript" src="../video/js/videojs-contrib-hls.js"></script>
<script language="javascript" src="video28181.js" type="text/javascript"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.myVideo-dimensions {
width: 100% !important;
height: 100% !important;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button>.vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content{
position: relative!important;
}
</style>
<style type="text/css">
.pie {
position: relative;
margin: 20px auto;
padding: 0;
width: 324px;
height: 324px;
border-radius: 50%;
list-style: none;
overflow: hidden;
background:url('../images/yuntai/bg_icon2.png') no-repeat center center / 80% 80%;
}
.center{
position: absolute;
width: 120px;
height: 120px;
top: 102px;
left: 102px;
border-radius: 50%;
background: url('../images/yuntai/auto_icon.png') no-repeat center center / 60% 60%;
cursor: pointer;
}
.slice {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
}
.slice-one {
transform: rotate(-22.5deg) skewY(-45deg);
}
.slice-one img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-two {
transform: rotate(22.5deg) skewY(-45deg);
}
.slice-two img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-three {
transform: rotate(67.5deg) skewY(-45deg);
}
.slice-three img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-four {
transform: rotate(112.5deg) skewY(-45deg);
}
.slice-four img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-five {
transform: rotate(157.5deg) skewY(-45deg);
}
.slice-five img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-six {
transform: rotate(202.5deg) skewY(-45deg);
}
.slice-six img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-seven {
transform: rotate(247.5deg) skewY(-45deg);
}
.slice-seven img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
.slice-eight {
transform: rotate(292.5deg) skewY(-45deg);
}
.slice-eight img{
transform: skewY(45deg) rotate(22.5deg);
margin-top: 110px;
margin-left: 10px;
cursor: pointer;
}
</style>
<script type="module">
$("#opinfo").height($(document).height() - $("#div_01").height() - 42);
//var Label_Start_Time = request("Label_Start_Time");
//var url = window.location.protocol + "//" + window.location.host + request("url");
//var url="ws://192.168.1.235:8083/rtp/gb_play_34020000001320000001_34020000001320000001/hls.m3u8";
//var url="http://192.168.1.235:8083/rtp/gb_play_34020000001320000001_34020000001320000001/hls.m3u8";//application/x-mpegURL
//var url="http://192.168.1.235:8083/rtp/gb_play_34020000001320000001_34020000001320000001.live.mp4";//video/mp4
var url="http://192.168.1.235:8083/rtp/gb_play_34020000001320000001_34020000001320000001.live.mp4";
//var url="rtmp://192.168.1.64/proxy/0";//video/mp4
//var url="rtmp://192.168.1.235:1935/rtp/gb_play_34020000001320000001_34020000001320000001";不支持
$("#source").attr("src", url);
setTimeout(function () {
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
});
}, 1000);
</script>
</head>
<body>
<div class="x12" style="height:100%">
<!-- <div class="panel-head x12" style="padding: 2px 8px;line-height: 40px;text-align:center;font-size:28px;">视频播放</div> -->
<div class="x7" style="height:100%">
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1280" height="720" data-setup='{}'>
<source id="source" type="application/x-mpegURL">
</video>
</div>
<div class="x5" id="div_con">
<div id="div_01" class="x12">
<div class="panel x12">
<div class="panel-head x12" style="padding: 2px 8px;">云台控制</div>
<div class="panel-body x12" style="padding: 2px;">
<!-- <div class="x12">
<div class="float-left" style="padding-top: 4px;">速度:</div>
<div class="float-left">
<select id="ptzspeed" class="input input-small" style="width: 100px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
<div class="float-left">
<button type="button" onclick="autoMove()">测试转动</button>
</div>
</div> -->
<div class="x12 margin-small-top">
<div class="x7 margin-small-top">
<ul class='pie'>
<li class='slice-one slice'><img src="../images/yuntai/up_icon.png" alt="" title="上" onclick="upcontrol()"></li>
<li class='slice-two slice'> <img src="../images/yuntai/up_icon.png" alt="" title="右上" onmousedown="DevControlMove(6);" onmouseup="DevControlMoveStop(6);"></li>
<li class='slice-three slice'> <img src="../images/yuntai/up_icon.png" alt="" title="右" onmousedown="DevControlMove(4);" onmouseup="DevControlMoveStop(4);"></li>
<li class='slice-four slice'> <img src="../images/yuntai/up_icon.png" alt="" title="右下" onmousedown="DevControlMove(8);" onmouseup="DevControlMoveStop(8);"></li>
<li class='slice-five slice'><img src="../images/yuntai/up_icon.png" alt="" title="下" onmousedown="DevControlMove(2);" onmouseup="DevControlMoveStop(2);"> </li>
<li class='slice-six slice'> <img src="../images/yuntai/up_icon.png" alt="" title="左下" onmousedown="DevControlMove(7);" onmouseup="DevControlMoveStop(7);"></li>
<li class='slice-seven slice'><img src="../images/yuntai/up_icon.png" alt="" title="左" onmousedown="DevControlMove(3);" onmouseup="DevControlMoveStop(3);"> </li>
<li class='slice-eight slice'> <img src="../images/yuntai/up_icon.png" alt="" title="左上" onmousedown="DevControlMove(5);" onmouseup="DevControlMoveStop(5);"></li>
<div class="center" title="自动" onclick="DevControlMove(9);" ></div>
<ul>
</div>
<div class="x5 margin-small-top" style="margin-top:70px;">
<div class="x12 margin-small-top" style="line-height: 50px;">
<div class="x6">
<img src="../images/yuntai/bba_icon.png" alt="" style="cursor: pointer;" title="变倍+" onmousedown="DevCameraMove(1)" onmouseup="DevCameraMoveStop(1)">
</div>
<div class="x6">
<img src="../images/yuntai/bbj_icon.png" alt="" style="cursor: pointer;" title="变倍-" onmousedown="DevCameraMove(2)" onmouseup="DevCameraMoveStop(2)">
</div>
</div>
<div class="x12 margin-small-top" style="line-height: 50px;">
<div class="x6">
<img src="../images/yuntai/bja_icon.png" alt="" style="cursor: pointer;" title="变焦+" onmousedown="DevCameraMove(3)" onmouseup="DevCameraMoveStop(3)">
</div>
<div class="x6">
<img src="../images/yuntai/bjj_icon.png" alt="" style="cursor: pointer;" title="变焦-" onmousedown="DevCameraMove(4)" onmouseup="DevCameraMoveStop(4)">
</div>
</div>
<div class="x12 margin-small-top" style="line-height: 50px;">
<div class="x6">
<img src="../images/yuntai/qqa_icon.png" alt="" style="cursor: pointer;" title="光圈+" onmousedown="DevCameraMove(5)" onmouseup="DevCameraMoveStop(5)">
</div>
<div class="x6">
<img src="../images/yuntai/qqj_icon.png" alt="" style="cursor: pointer;" title="光圈-" onmousedown="DevCameraMove(6)" onmouseup="DevCameraMoveStop(6)">
</div>
</div>
<div class="x12 margin-small-top" style="line-height: 50px;">
<div class="x2">速度:</div>
<div class="x7" style="position:relative;top:20px;">
<div class="progress">
<div id="ptzspeed" class="progress-bar bg-sub" style="width:50%;">
50</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="x12 margin-small-top">
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">左上
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">上
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">右上
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()" class="button button-small"
style="width: 100%;">变倍+
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()" class="button button-small"
style="width: 100%;">变倍-
</button>
</div>
</div>
<div class="x12">
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">左
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onclick="mouseDownPTZControl(9);" class="button button-small" style="width: 100%;">
自动
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">右
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="PTZFocusIn()" onmouseup="" class="button button-small"
style="width: 100%;">变焦+
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="PTZFoucusOut()" onmouseup="PTZFoucusStop()" class="button button-small"
style="width: 100%;">变焦-
</button>
</div>
</div>
<div class="x12">
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">左下
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">下
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();"
class="button button-small" style="width: 100%;">右下
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="PTZIrisIn()" onmouseup="PTZIrisStop()" class="button button-small"
style="width: 100%;">光圈+
</button>
</div>
<div class="x2" style="width: 20%; padding: 2px;">
<button onmousedown="PTZIrisOut()" onmouseup="PTZIrisStop()" class="button button-small"
style="width: 100%;">光圈-
</button>
</div>
</div> -->
</div>
</div>
</div>
<div class="x12 margin-small-top">
<div class="panel x12">
<div class="panel-head x12" style="padding: 2px 8px;">提示信息</div>
<div id="opinfo" class="panel-body x12"
style="padding: 2px;height: 80px;overflow-y: scroll;font-size: 8pt;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>