object上方懸浮div並實現拖拽，雲臺控制等操作
注意：
1.在static目錄下創建video.html
2.必須安裝2.2.1-win32版本的vlc插件
3.vlc安裝文件：
鏈接：https://pan.baidu.com/s/1yQJ9SDh0YWw84yhXkLrMjQ
提取碼：zq9k
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#containe {
width: 100%;
height: 100%;
}
#vlc {
width: 100%;
height: 100%;
}
.ball {
width: 160px;
height: 100%;
list-style: none;
display: block;
margin: auto;
}
.ball li {
border: 1px solid #505050;
list-style: none;
width: 45px;
height: 45px;
float: left;
margin-left: 5px;
margin-top: 5px;
cursor: pointer;
}
.ball li img {
display: block;
display: block;
width: 15px;
height: 15px;
margin: 15px auto;
}
</style>
</head>
<body>
<div id="containe">
<object type='application/x-vlc-plugin;' pluginspage="http://www.videolan.org/" id='vlc'
events='false' width="100%">
<param name="mrl" value=''/>
<script>
var surl = 'rtsp://11.101.49.2:9090/dss/monitor/param?cameraid=1000001%241&substream=1'//"rtsp://admin:[email protected]:554/h264/ch45/main/av_stream"//localStorage.getItem('url')//"rtsp://admin:[email protected]:554/h264/ch45/main/av_stream";
document.getElementById("vlc").getElementsByTagName("param")[0].value = surl;
</script>
<param name='volume' value='50'/>
<param name='autoplay' value='true'/>
<param name='loop' value='false'/>
<param name='fullscreen' value='false'/>
<param name='controls' value='false'/>
</object>
<div id="demodiv"
style="width: 165px; height:163px; top: 10px; right: 10px;z-index:9999;position: absolute;">
<div>
<ul class="ball" id="ball">
<li onmousedown="return false;" onclick="leftTop()">
<img src="img/1.png" alt="">
</li>
<li onmousedown="return false;" onclick="otop()">
<img src="img/2.png" alt="">
</li>
<li onmousedown="return false;" onclick="rightTop()">
<img src="img/3.png" alt="">
</li>
<li onmousedown="return false;" onclick="oleft()">
<img src="img/4.png" alt="">
</li>
<li onmousedown="return false;" style="border:none;">
<img src="img/click.png" style="width: 25px;height: 25px; margin: 10px auto;" alt="">
</li>
<li onmousedown="return false;" onclick="oright()">
<img src="img/6.png" alt="">
</li>
<li onmousedown="return false;" onclick="bottomLeft()">
<img src="img/7.png" alt="">
</li>
<li onmousedown="return false;" onclick="obottom()">
<img src="img/8.png" alt="">
</li>
<li onmousedown="return false;" onclick="bottomRight()">
<img src="img/9.png" alt="">
</li>
</ul>
</div>
<iframe id="iframe1"
allowTransparency="true"
src="about:blank" frameBorder="0"
marginHeight="0" marginWidth="0"
style="position:absolute; visibility:inherit;
top:0px;right:0px;
width:165px;
background: transparent;
height:163px;z-index:-1; filter:alpha(opacity=0);">
</iframe>
</div>
</div>
</body>
</html>
<script>
//獲取元素
// var dv = document.getElementById('ball');
var dv = document.getElementById('demodiv');
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠標按下事件
dv.onmousedown = function (e) {
//獲取x座標和y座標
x = e.clientX;
y = e.clientY;
//獲取左部和頂部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//開關打開
isDown = true;
//設置樣式
dv.style.cursor = 'move';
}
//鼠標移動
window.onmousemove = function (e) {
if (isDown == false) {
return;
}
//獲取x和y
var nx = e.clientX;
var ny = e.clientY;
//計算移動後的左偏移量和頂部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
}
//鼠標擡起事件
dv.onmouseup = function () {
//開關關閉
isDown = false;
dv.style.cursor = 'default';
}
// websocket連接開始
window.onload = function () {
initWebSocket()
}
var sessonId
var websocket
function initWebSocket() {
if ('WebSocket' in window) {
websocket = new WebSocket('ws://192.168.88.18:8081/board')
// 連接錯誤
websocket.onerror = this.setErrorMessage
// //連接成功
websocket.onopen = this.setOnopenMessage
// 收到消息的回調
websocket.onmessage = this.setOnmessageMessage
// 連接關閉的回調
websocket.onclose = this.setOncloseMessage
// 監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = this.onbeforeunload
} else {
alert('當前瀏覽器不支持顯示實時數據，請更換最新瀏覽器')
}
}
function setErrorMessage() {
console.log('err')
// this.data = 'WebSocket連接發生錯誤' + ' 狀態碼：' + this.websocket.readyState
}
function setOnopenMessage() {
console.log();
// console.log('連接成功')
// websocket.send(' ')
}
function setOnmessageMessage(res) {
var data = JSON.parse(res.data)
console.log(data);
if (data.msg == "webScoket連接成功") {
console.log('連接成功');
sessonId = data.id
localStorage.setItem('sessonId', data.id)
websocket.send('0;1000001$1$0$1;' + localStorage.getItem('sessonId'))
// console.log(sessonId);
} else {
console.log(data.msg);
}
}
function setOncloseMessage() {
// this.data = 'WebSocket連接關閉' + ' 狀態碼：' + this.websocket.readyState
}
function onbeforeunload() {
this.closeWebSocket()
}
// websocket發送消息
function send() {
// this.websocket.send(this.text)
// this.text = ''
}
function closeWebSocket() {
websocket.close()
}
function leftTop() {//左上
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+5)
}
function otop() {//上
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+1)
}
function rightTop() {//右上
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+7)
}
function oleft() {//左
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+3)
}
function oright() {//右
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+4)
}
function obottom() {//左下
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+2)
}
function bottomRight() {//右下
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+8)
}
function bottomLeft() {//左下
websocket.send('1;1000001$1$0$1;' + localStorage.getItem('sessonId')+';'+6)
}
// websocket連接結束
</script>