vionPlayerDemo.vue 2.51 KB
<template>
  <div class="j-player-demo">
    <div class="player-content">
      <vion-player ref="vionPlayer"
        :type="playerType"
        prefix-url=""
        player-address="52.130.155.147"
        channel-id="20000000001310000008"
        :datetime-range="datetimeRange"
        watermarkText="方案智能"
      />
    </div>
    <div class="footer">
      <div class="play">
        <input type="text" v-model="playUrl">
        <button @click="handlePlay">播放</button>
      </div>
      <!-- <button @click="handleLive">直播</button> -->
      <!-- <button @click="handlePlayback">回放</button> -->
      <button @click="handlePause">暂停</button>
      <button @click="handleStop">停止</button>
      <button @click="handleDestroy">销毁</button>
      <!-- <button @click="handleScreenshot">抓拍</button> -->
    </div>
  </div>
</template>

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

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

      // 播放器相关
      playUrl: 'https://xyrtmp.ys7.com:9188/v3/openlive/33011015992467054043:33010285991117359447_1_1.flv?expire=1695197391&id=624275978952122369&t=5d6125d91a189547ecc984fd4f153abea9dbf72b6bc77a88c7d5e6054ae7df48&ev=100&devProto=gb28181&supportH265=1',
    }
  },
  methods: {
    handlePlay() {
      const url = this.playUrl;
      this.$refs.vionPlayer.play(url);
    },
    handleLive() {
      this.playerType = 'live';
    },
    handlePlayback() {
      this.playerType = 'playback';
      this.datetimeRange = [
        '1693904400000',
        '1693908000000',
      ];
    },
    handleScreenshot() {
      this.$refs.vionPlayer.screenshotWatermark().then(data => {
        console.log('handleScreenshot', data);
      });
    },
    handlePause() {
      this.$refs.vionPlayer.pause();
    },
    handleStop() {
      this.$refs.vionPlayer.stop();
    },
    handleDestroy() {
      this.$refs.vionPlayer.destroy();
    },
  },
}
</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;
    }
  }
}
</style>