安装

$ npm install xgplayer

对于已有项目也可以通过 CDN 引入，代码如下：

<script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

使用

1. 在页面提供占位 DOM

<div id="mse"></div>

2. 实例化

引入：

created() {
  // 此处引入xgplayer
  Player = require("xgplayer")
},

初始化及相关配置：

 initPlayer() {
     if (this.player) {
       this.player.destroy()
     }
     let player = this.player || null
     setTimeout(() => {
       player = new Player({
         id: "mse", // 绑定Dom
         url: this.curCourseVieoUrl, // 视频链接
         volume: 0.5, // 默认音量
         autoplay: true, // 自动播放
         fluid: true, 
         width: '100%', // 播放器宽度
         height: '470px', // 播放器高度
         playbackRate: [0.75, 1.0, 1.25, 1.5, 2.0],   // 可选播放速度选项
         defaultPlaybackRate: 1,     // 播放速度设置为1
         playsinline: true,
         pip: false, // 画中画
         // loop: true // 播放完当前视频自动播放下一个
       });
       this.player = player
       
       // 设置视频播放时的开始时间点
       player.currentTime = this.vidoeStartTime 
       
       // 监听视频时长变化
       player.on('durationchange', (val) => {})
       
       // 监听视频已播放时间变化
       player.on('timeupdate', (val) => {
         //this.currentPlayingTime = val.video.currentTime
       })
      
       // 监听视频播放
       player.on('play', (val) => {})
       
       // 监听视频播放进程
       player.on('playing', (val) => {})
       
       // 拖拽视频进度条或者点击进度条后视频播放节点
       player.on('canplay', (val) => {})
       
       // 监听视频暂停
       player.on('pause', (val) => {})
      
      // 监听视频播放结束
       player.on('ended', (val) => {})
     }, 500)
   }
 }

本文使用 mdnice 排版