<template>
  <div ref="videoRef"></div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-08-01 21:53:51
 */
import Player from 'xgplayer'
export default {
  name: "WlVideo",
  props: {
    poster: {
      type: String,
      default: "",
    },
    videoUrl: {
      type: String,
      default: "",
    }
  },
  methods: {
    initVideo() {
      let that = this;
      // 这里的videoRef可以换成video元素的id "videobox"
      let player = new Player({
        el: this.$refs.videoRef,
        url: this.videoUrl,
        videoInit: true,
        poster: this.poster,
        playsinline: true,
        preloadTime: 100,
        minCachedTime: 30,
        fluid: true,
        fitVideoSize: "auto",
        "x5-video-player-type": "h5",
        danmu: {
          closeDefaultBtn: true
        }
      })
      player.on('timeupdate', function (val) {
        //事件名称可以在上述查询
        if (val.currentTime > 0) {
          const { duration, currentTime } = val;
          that.$emit("onTimeUpdate", {
            duration, currentTime
          });
        }
      })
    }
  },
  mounted() {
    this.initVideo();
  }
};
</script>
