vionPlayerDemo.vue 4.27 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"
        @rate-change="handleRateChange"
      />
    </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="handleRotate">旋转</button>
      <button @click="handleScreenshot">抓拍</button>
      <button @click="handleScreenshot2">抓拍(原)</button>
      <button @click="handleZoom(true)">放大</button>
      <button @click="handleZoom(false)">缩小</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=1695801507&id=626809821921091584&t=012b62efc1b531ada1d08aae3d374c4cb9cf999a87f38b298b52a14bbcc51883&ev=100&supportH265=1',
      // playUrl: 'http://flv.bdplay.nodemedia.cn/live/bbb_264.flv',
      // playUrl: '',
      recordUrl: 'https://rtmp01open.ys7.com:9188/v3/openpb/F16423875_1_1.flv?begin=20230925113136&end=20230925182952&expire=1695724192&id=626485541843505152&rec=local&t=1a3147ede9f0c48ed31df986f8e1a24b39ebcebf0325c134bdae5d8bbda078f5&ev=100&supportH265=1',
    }
  },
  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, true);
    },
    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();
    },
    handleRotate() {
      console.log('handleRotate');
      this.$refs.vionPlayer.rotate();
    },
    handleZoom(direction) {
      this.$refs.vionPlayer.zoom(direction);
    },

    handlePtz(arrow) {
      console.log('handlePtz', arrow);
    },
    handleRateChange(rate, done) {
      console.log('handleRateChange', rate, done);
      // 请求接口,获取流地址
      done(rate);
    },
  },
}
</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>