npm install xgplayer --save

<template>
  <div class="video-player" ref="videoContainer">
    <!-- 視頻播放器容器 -->
    <div ref="player" class="xgplayer-container"></div>
    <div class="controls">
      <button @click="likeVideo">?? {{ likeCount }}</button>
      <button @click="collectVideo">? {{ collectCount }}</button>
      <button @click="shareVideo">?? 分享</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import XGPlayer from 'xgplayer'; // 引入 XGPlayer

export default defineComponent({
  props: {
    videoUrl: String, // 視頻地址
  },
  data() {
    return {
      likeCount: 0,
      collectCount: 0,
    };
  },
  methods: {
    likeVideo() {
      this.likeCount++;
    },
    collectVideo() {
      this.collectCount++;
    },
    shareVideo() {
      alert("分享功能未實(shí)現(xiàn)");
    },
    initPlayer() {
      this.player = new XGPlayer({
        el: this.$refs.player,
        url: this.videoUrl, // 初始化視頻地址
        autoplay: true,  // 設(shè)置自動(dòng)播放
        preload: 'auto', // 設(shè)置視頻預(yù)加載
      });
    },
  },
  mounted() {
    this.initPlayer();
  },
  watch: {
    videoUrl(newUrl) {
      if (this.player) {
        this.player.src = newUrl; // 切換視頻時(shí)更新播放器的 URL
      }
    },
  },
});
</script>

<style scoped>
.video-player {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  background-color: black;
}
.controls {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
button {
  padding: 10px;
  font-size: 16px;
}
</style>