Tinger
/
All


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>player</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>-->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>-->
<!--    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>-->
    <style>
      .sk-chase {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        animation: sk-chase 2.5s infinite linear both;
      }
      .sk_text {
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: block;
          color: #fff;
      }

      .sk-chase-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        animation: sk-chase-dot 2.0s infinite ease-in-out both;
      }

      .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #8cc5ff;
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
      }

      .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
      .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
      .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
      .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
      .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
      .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
      .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
      .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
      .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
      .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
      .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
      .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

      @keyframes sk-chase {
        100% { transform: rotate(360deg); }
      }

      @keyframes sk-chase-dot {
        80%, 100% { transform: rotate(360deg); }
      }

      @keyframes sk-chase-dot-before {
        50% {
          transform: scale(0.4);
        } 100%, 0% {
            transform: scale(1.0);
          }
      }
      #error_text {
          width: 170px;
          height: 170px;
          background: url("./image/siagn.png") no-repeat;
          background-size: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
      }
      body::-webkit-scrollbar {
          display: none;
      }
    </style>
</head>
<body style="margin: 0; width: 100%; text-align: center; z-index:999; background-color: transparent; overflow:hidden " >
    <video width="100%" id="video"></video>
    <canvas id="canvas"></canvas>
    <canvas id="draw"></canvas>
    <div id="sk_text" class="sk_text">视频加载中..</div>
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
    <div id="error_text" ></div>
</body>
<script type="module">
    import Player from "./src/player.js";
    var clickTimeId;
    let str  = location.href;
    let num = str.indexOf('?');
    str = str.substr(num+1);
    let data = str.split(',');
    let isShow = Number(data[0]);
    let key = data[4];
    let video = document.getElementsByTagName('body')[0];
    let height = video.clientHeight;

    // 定时器
    let timer = null;
    let count = 0;
    video.dblclick = function () {
    };
    function onDocumentClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        //执行延时
        clickTimeId = setTimeout(function() {
            //此处为单击事件要执行的代码
            console.log("鼠标单击");
        }, 250);
    }
    function onDocumenDblClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        console.log("鼠标双击");
      // isFullscreenEnabled();
      let video = document.getElementById('video');

        if (video.requestFullscreen) { //w3c
          console.log(video.requestFullscreen);
          console.log(video.requestFullscreen());
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) { //moz Firefox
          video.mozRequestFullScreen();
        } else if (video.msRequestFullscreen) { //IE
          video.msRequestFullscreen();
        } else if (video.oRequestFullscreen) { //Opera
          video.oRequestFullscreen();
        } else if (video.webkitRequestFullscreen) { //webkit内核 Chrome Safari
          video.webkitRequestFullScreen();
        }
    }

    // close.onclick = function () {
    //   let video = document.getElementById('bodySng');
    // }

    // function isFullscreenEnabled() {
    //   return  (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
    // }
    const options = {
        video: document.getElementById('video'),
        canvas: document.getElementById('canvas'),
        drawer: document.getElementById('draw'),
        // wsUrl:'ws://111.2.71.225:10080/camera_relay?tcpaddr=admin%3Ahmkj6688%40192.168.1.144',
        // rtspUrl: 'rtsp://admin:hmkj6688@192.168.1.144',
        user: '',
        pwd: ''
    };
    options.wsUrl = data[1];
    options.rtspUrl = data[2];
    let player = new Player(options);
    player.init();
    player.on('error', function () {
      clearInterval(timer)
        console.log('连接失败')
      let er = document.getElementById('error_text');
      er.style.display = 'block';
      // er.style.lineHeight = height + 'px';
      er.style.lineHeight = height + 'px';

    });
    player.on('noStream', function () {
        console.log('noStream');
        player.close();
        player = null;
        player = new Player(options);
        player.init();
        player.connect();
    });
    // 首次播放
    player.on('canplay', function () {
      clearInterval(timer)
      let sk = document.getElementsByClassName('sk-chase')[0];
      sk.style.display = 'none';

      let text = document.getElementById('sk_text');
      text.style.display = 'none';
    });

    player.on('initialCompleted', function () {
    });

    player.on('ROIFinished', function () {
       console.log('ROIFinished');
    });

    player.connect();

    window.onload = function() {
      document.addEventListener('dblclick', onDocumenDblClick);
    };

    timer = setInterval(() => {
      count++;
      if(count > 5) {
        player.close();
        count = 0;
        let er = document.getElementById('error_text');
        er.style.display = 'block';
        er.style.lineHeight = height + 'px';
        let sk = document.getElementsByClassName('sk-chase')[0];
        sk.style.display = 'none';

        let text = document.getElementById('sk_text');
        text.style.display = 'none';
        clearInterval(timer)
      }
    }, 1000)


</script>
</html>