|
|
|
|
|
<!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>
|
