vue项目中使用XgPlay.js播放视频

在Vue项目中使用XgPlayer.js播放视频，首先需要安装XgPlayer：

npm install xgplayer

然后在Vue组件中引入XgPlayer并初始化播放器：

<template>
  <div id="video-container"></div>
</template>
 
<script>
import { Player, utils } from 'xgplayer';
 
export default {
  name: 'VideoPlayer',
  mounted() {
    const player = new Player({
      id: 'video-container',
      url: 'http://www.w3school.com.cn/i/movie.mp4', // 视频流地址
      // 其他配置项...
    });
 
    utils.on(player, 'play', () => {
      console.log('Video is playing...');
    });
 
    utils.on(player, 'pause', () => {
      console.log('Video is paused...');
    });
 
    utils.on(player, 'destroy', () => {
      console.log('Player is destroyed...');
    });
  }
};
</script>
 
<style>
#video-container {
  width: 100%;
  height: 500px;
}
</style>

在上述代码中，我们创建了一个名为VideoPlayer的Vue组件，在该组件的mounted生命周期钩子中初始化了XgPlayer播放器，并监听了播放、暂停和销毁事件。视频流地址可以根据实际情况进行替换。