<template>
  <div class="flv">
    <video controls autoplay="autoplay" muted="muted" ref="video">
      <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,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.destroy();
  },
  methods: {
    //页面初始化
    init() {
      if (flvjs.default.isSupported()) {
        // 获取DOM对象
        this.player = this.$refs.video;
        // 创建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.data.vUrl, // 指定流链接
        });
        // 将flvjs对象和DOM对象绑定
        this.flvPlayer.attachMediaElement(this.player);
      }
      this.play();
    },

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

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

    fullScreen() {
      let video = this.$refs.video;
      if (video.webkitRequestFullScreen) {
        video.webkitRequestFullScreen();
      } else if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen)
        setTimeout(() => {
          video.play();
        }, 200);
    },
  },
};
</script>

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