demo-pc.html 2.54 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DemoPC</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .demo-pc-player {
        width: 800px;
        height: 480px;
      }
      .footer {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    </style>
</head>
<body>
    <div class="demo-pc-player">
      <iframe id="player" src="/vion-player/#/vionplayer-web"
        frameborder="0"
        height="100%"
        width="100%"
        onload="initPlayer()"
      >
    </iframe>
    </div>

    <div class="footer">
        <div class="play-part" style="display: inline-block;">
          <input id="unid" type="text" value="7c55b448-5857-11ee-8777-00163e143ecd">
          <button id="play">播放</button>
        </div>
        <button id="stop">停止</button>
        <button id="screenshot">截图</button>
    </div>

    <script>
      var $playBtn = document.getElementById('play');
      var $stopBtn = document.getElementById('stop');
      var $screenshotBtn = document.getElementById('screenshot');
      var $player = document.getElementById('player');
      var $playUnid = document.getElementById('unid');

      function initPlayer() {
        $player.contentWindow.initWebVideo({
          isShowTime: true,// 是否显示时间操作区,默认为true
          height: '',// 设置组件高度
          isShowJT: false,// 是否显示截图按钮,默认为false
          isShowSplit: true,// 是否支持四分屏,默认为true
          hideControls: true,// 是否显示视频操作区,默认为false
          showPtz: true,// 是否显示视频操作区中的云台控制,默认为true
        });
      }
      
      // 播放
      $playBtn.addEventListener('click', function () {
        console.log('playBtn', $player, $playUnid.value);

        $player.contentWindow.playWebVideo({ gateUnid: $playUnid.value })
      }, false);

      // 停止
      $stopBtn.addEventListener('click', function () {
        console.log('stopBtn', $player);

        $player.contentWindow.stopPlay();
      }, false);
      
      // 截图
      $screenshotBtn.addEventListener('click', function () {
        console.log('screenshotBtn', $player, $player.contentWindow.screenshot);

        $player.contentWindow.screenshot().then(data => {
          console.log('screenshotData', data);
        })
      }, false);
    </script>
</body>
</html>