<template>
  <div class="mv-video-player-container">
    <video ref="video"
           controls="controls"
           autoplay
           muted></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'
import GDPlayer from "../lib/plugins/GDPlayerPub";
import config from '../lib/config'

const VIDEO_TYPE = ['flvPlayer', 'GDPlayer']
/**
* 视频播放器
* @author 朱琦（zhuq@microvideo.cn）
* @date   时间：2022/4/21
*/
export default {
  name: 'MvVideoPlayer',
  props: {
    /**
     * 视频类型
     */
    type:{
      type: String,
      default: VIDEO_TYPE[0]
    },
    /**
     * 视频地址
     */
    url: {
      type: String,
      default: ''
    },
    /**
     * 视频数据
     */
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      player: null
    }
  },
  watch: {
    url () {
      this.createPlayer()
    }
  },
  computed: {

  },
  created () {
  },
  mounted () {
    this.createPlayer()
  },
  methods: {
    /**
     * 创建 播放器
     */
    createPlayer () {
      this.destroyPlayer()
      if (!this.url) return
      switch (this.type) {
        case 'GDPlayer':
          this.creteGDPlayer()
        break;
        case 'flvPlayer':
          this.createFlvPlayer()
          break;

        default:
          break;
      }
    },
    /**
     * 创建 感动视频流 播放器
     */
    creteGDPlayer() {
      this.player = new GDPlayer();
      let playUrl = this.url;    // 视频播放地址
      let gatewayNum = this.data.gatewayNum;  // 网关编码
      let playerId = this.data.playerId;            // playerId
      let cameraNum = this.data.cameraNum;    // 相机编码
      this.$refs.video.srcObject = this.player.stream; // 视频流渲染
      this.play(playUrl,cameraNum, gatewayNum, playerId);
    },
    /**
     * 创建 flv视频流 播放器
     */
    createFlvPlayer() {
      if (flvjs.isSupported()) {
        let video = this.$refs.video
        this.player = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          url: this.url
        })
        this.player.attachMediaElement(video)
        this.player.load()
        setTimeout(() => {
          this.player.play()
        }, 1000)

      }
    },
    /**
     * 感动播放器开始播放
     * @param {String} playUrl 视频播放地址
     * @param {String} deviceId 相机id
     * @param {String} gatewayId 网关id
     * @param {String} playerId 用户
     */
    play(playUrl, deviceId, gatewayId, playerId) {
        let IP = config.GD_VIDEO_IP;
        let startTime = '';
        this.player.play(playUrl, IP, deviceId, gatewayId, playerId, startTime, null).then(data => {
            console.log(">>>>>>视频连接成功<<<<<<");
        }).catch(e => {
            console.log("重连中...");
            setTimeout(() => this.play(playUrl, gatewayId, playerId, deviceId), 3000)
        })
    },
    /**
     * 销毁播放器
     */
    destroyPlayer () {
      if (!this.player) {
        return
      }
      if (this.type === 'flvPlayer') {
        this.player.pause()
        this.player.unload()
        this.player.detachMediaElement()
        this.player.destroy()
      } else {
        this.player.stopPlay()
      }
      this.player = null
    },
  },
  beforeDestroy(){
    this.destroyPlayer()
  }
}
</script>

<style scoped>
.mv-video-player-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mv-video-player-container video {
  width: 100%;
  height: 100%;
}
</style>
