<template>
  <div  style="width: 100%; height: 500px">
    <div id="videoContainer"></div>
  </div>
</template>

<script>
export default {
  name: "videoModal",
  data() {
    return {
      player: null,
    };
  },
  props: {
    videoSrc: String,
  },
  mounted() {
    console.log(this.videoSrc);
    this.initVideo(this.videoSrc);
  },
  beforeDestroy() {
    if (this.player != null) {
      this.player.dispose();
      //   this.player.pause();
      //   this.player.destroy();
      this.player = null;
      console.log("销毁组件：", this.player);
    }
  },
  methods: {
    initVideo(source) {
      if(this.player == null){
          this.player = new Aliplayer(
              {
                  id: "videoContainer",
                  source: source,
                  width: "100%",
                  height: "100%",
                  definition:'FD,LD,SD,HD,OD',
                  enableSystemMenu:true,
                  x5_fullscreen:true,
                  //   autoplay: true,
                  isLive: true,
                  //   rePlay: false,
                  //   playsinline: true,
                  //   preload: true,
                  //   controlBarVisibility: "hover",
                  //   useH5Prism: true,
                  skinLayout: [
                      {
                          name: "bigPlayButton",
                          align: "blabs",
                          x: 30,
                          y: 80,
                      },
                      {
                          name: "H5Loading",
                          align: "cc",
                      },
                      {
                          name: "errorDisplay",
                          align: "tlabs",
                          x: 0,
                          y: 0,
                      },
                      {
                          name: "infoDisplay",
                      },
                      {
                          name: "tooltip",
                          align: "blabs",
                          x: 0,
                          y: 56,
                      },
                      {
                          name: "thumbnail",
                      },
                      {
                          name: "controlBar",
                          align: "blabs",
                          x: 0,
                          y: 0,
                          children: [
                              {
                                  name: "volume",
                                  align: "tr",
                                  x: 5,
                                  y: 10,
                              },
                          ],
                      },
                  ],
              },
              function (player) {
                  console.log("The player is created");
              }
          );
      }else{
          this.player.loadByUrl(source)
      }
    },
  },
};
</script>

<style scoped>
#videoContainer {
  width: 768px !important;
  height: 500px !important;
}
</style>
