vionPlayerDemo.vue 3.44 KB
<template>
  <div class="j-player-demo">
    <div class="player-content">
      <!-- :play-url="playUrl" -->
      <vion-player v-if="playerVisible"
        ref="vionPlayer"
        :datetime-range="datetimeRange"
        watermarkText="文安智能678"
        @ptz-control="handlePtz"
      />
    </div>
    <div class="footer">
      <div class="play">
        <input type="text" v-model="playUrl">
        <button @click="handlePlay">播放</button>
      </div>
      <button @click="handleReplay">重新播放</button>
      <!-- <button @click="handleShow">展示</button> -->
      <button @click="handlePause">暂停</button>
      <button @click="handleStop">停止</button>
      <button @click="handleDestroy">销毁</button>
      <button @click="handleScreenshot">抓拍</button>
      <button @click="handleScreenshot2">抓拍(原)</button>
      <div class="record">
        <input type="text" v-model="recordUrl">
        <button @click="handleRecord">录像</button>
      </div>
    </div>

    <el-dialog title="Image" :visible.sync="dialogVisible" width="90%">
      <img v-if="dialogVisible" :src="base64Url" alt="base64" />
    </el-dialog>
  </div>
</template>

<script>
import VionPlayer from '../../components/vionPlayer';

export default {
  name: 'VionPlayerDemo',
  components: {
    VionPlayer,
  },
  data() {
    return {
      datetimeRange: [],

      playerVisible: true,
      dialogVisible: false,
      base64Url: '',

      // 播放器相关
      // playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_4_1.flv?expire=1695696850&id=626370860302729216&t=8c5be77f3d74149d2cdb93f913baf0c171bc33f8d6b6507510e8869b3392a4da&ev=100&supportH265=1',
      playUrl: '',
      recordUrl: '',
    }
  },
  methods: {
    handlePlay() {
      const url = this.playUrl;
      this.$refs.vionPlayer.play(url);
    },
    handleReplay() {
      // 重新播放录像
      this.$refs.vionPlayer.replay(this.recordUrl);
    },
    handleShow() {
      this.playerVisible = true;
    },
    handleRecord() {
      this.$refs.vionPlayer.play(this.recordUrl);
    },
    handleScreenshot() {
      this.$refs.vionPlayer.screenshot().then(data => {
        console.log('handleScreenshot', data);
        this.base64Url = data;
        this.dialogVisible = true;
      }).catch(err => {
        console.error(err);
      })
    },
    handleScreenshot2() {
      this.base64Url = this.$refs.vionPlayer.screenshotOrigin();
      this.dialogVisible = true;
    },
    handlePause() {
      this.$refs.vionPlayer.pause();
    },
    handleStop() {
      this.$refs.vionPlayer.stop();
    },
    handleDestroy() {
      this.$refs.vionPlayer.destroy();
    },

    handlePtz(arrow) {
      console.log('handlePtz', arrow);
    },
  },
}
</script>

<style lang="scss" scoped>
.j-player-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  outline: 1px solid #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
  > .player-content {
    width: 800px;
    height: 480px;
  }
  > .footer {
    margin-top: 10px;
    > div.play {
      display: inline-block;
      margin-right: 10px;
      > button {
        margin-left: 2px;
      }
    }
    > button {
      margin-right: 10px;
    }

    > div.record {
      margin-top: 10px;
      > button {
        margin-left: 2px;
      }
    }
  }
  ::v-deep(.el-dialog__body) {
    text-align: center;
    background-color: #CCC;
    > img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>