<template>
  <div class="flv">
    <video controls autoplay="autoplay" muted="muted" id="videoElement">
      <source type="video/mp4" />
    </video>
    <!-- <button @click="play">播放</button> -->
  </div>
</template>

<script>
import * as flvjs from "./flv.js";
export default {
  props: {
    data: Object,
  },
  data() {
    return {
      player: null,
      flvPlayer: null,
      videourl: ""
    };
  },
  mounted() {
    this.videourl = this.data.vUrl
    console.log(this.data.vUrl);
    this.ngOnInit();
  },
  methods: {
    //页面初始化
    ngOnInit() {
      if (flvjs.default.isSupported()) {
        // 获取DOM对象
        this.player = document.getElementById("videoElement");
        // 创建flvjs对象
        this.flvPlayer = flvjs.default.createPlayer({
          type: "flv", // 指定视频类型
          isLive: true, // 开启直播
          hasAudio: false, // 关闭声音
          cors: true, // 开启跨域访问
          // url: "http://pzlink999bju.powzamedia.com:8000/live/flv/test/mlinkm/channel1?only-video=1", // 指定流链接
          url: this.getTarget(this.videourl), // 指定流链接
        });
        // 将flvjs对象和DOM对象绑定
        this.flvPlayer.attachMediaElement(this.player);
      }
      this.play()
    },
    getTarget(url) {
      const reg = /^pzsp:\/\/(.*):7788.*\/trans\/(.*)\/mlinkm\/(.*)\?/;
      url.match(reg);
      const hostname = RegExp.$1;
      const groupname = RegExp.$2;
      const streamname = RegExp.$3;

      return `http://${hostname}:8000/live/flv/${groupname}a/mlinkm/${streamname}?only-video=1`;
    },

    // 播放视频
    play() {
      this.flvPlayer.load(); // 加载视频
      this.flvPlayer.play(); // 播放
    },

    //页面退出销毁和暂停播放
    ngOnDestroy() {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      // 卸载DOM对象
      this.flvPlayer.detachMediaElement();
      // 销毁flvjs对象
      this.flvPlayer.destroy();
    },
  },
};
</script>

<style lang="scss" scoped>
.flv {
  width: 100%;
  height: 100%;
  #videoElement {
    width: 100%;
    height: 100%;
  }
}
</style>
