object标签上悬浮div标签，可拖拽,播放rtsp视频

最新推荐文章于 2023-12-08 17:15:11 发布

倾听雨落~

最新推荐文章于 2023-12-08 17:15:11 发布

阅读量755

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43292447/article/details/106645773

版权

vue 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

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:abcd1234@11.101.45.130:554/h264/ch45/main/av_stream"//localStorage.getItem('url')//"rtsp://admin:abcd1234@11.101.45.130: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>


```【阿里云】2核2G1M 86元/年；2核8G1M 390元/年；4核8G1M 664元/年
活动地址：https://www.aliyun.com/minisite/goods?userCode=q8eccx2x
<a href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=q8eccx2x">
<img src="http://10.phplike.com/1.jpg" border="0" width="100%" height="200" >

倾听雨落~

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
object标签上悬浮div标签，可拖拽,播放rtsp视频

object上方悬浮div并实现拖拽，云台控制等操作<!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&g
复制链接

扫一扫