视频播放器（xgplayer）

https://h5player.bytedance.com/plugins/

https://github.com/bytedance/xgplayer

import Player from ‘xgplayer’
import ‘xgplayer/dist/index.min.css’

 files: {
        docx: 'http://static.shanhuxueyuan.com/test6.docx',
        pdf: 'http://static.shanhuxueyuan.com/test.pdf',
        excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx',
        videoUrl:'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4?i=1' 
      },
      player: null

  watch: {
    "files.videoUrl": {
      handler(newValue, oldValue) {
        if (!this.player) {
          this.initPlayer();
          return;
        }
        this.player.src = this.files.videoUrl;
      },
    },
  },

 //#region 视频播放器
    initPlayer() {
      this.$nextTick(() => {
        const playerContainer = this.$refs.playerContainer
        const url = this.files.videoUrl;// 替换为你的视频URL
        this.player = new Player({
          id: 'vsPlayer',
          url: url,
          container: playerContainer,
          autoplay: true // 是否自动播放
          // 其他配置...
        })

        // 监听播放器的各种事件
        this.player.on('play', () => {
          console.log('开始播放')
        })
        this.player.on('pause', () => {
          console.log('暂停播放')
        })
        this.player.on('ended', () => {
          console.log('播放结束')
        })
        this.player.on('error', err => {
          console.error('播放出错', err)
        })
        // 监听更多其他事件...
      })
    }
    //#endregion 视频播放器