【Nuxt3】添加西瓜播放器插件xgplayer

前言

在vue3+Nuxt3项目中添加播放器插件，我思来想去，还是觉得西瓜播放器插件不错。但是安装的过程中并不是很顺利，最后终于安装上了，以此记录。

官网文档：西瓜播放器官方文档

1、安装（我习惯用yarn，所以以yarn为例，如果用npm请看官网文档）

yarn add xgplayer

2、在页面上添加html元素

// pages/index.vue
<template>
	<div id="mse"></div>
</template>

3、ts代码

// pages/index.vue
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

onMounted(() => {
  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: false, //自动播放
    screenShot: false, // 开启截图功能

    //视频地址
    url: "https://v3.cdnpk.net/videvo_files/video/free/2014-12/large_preview/Raindrops_Videvo.mp4",

    //封面图
    poster:
        "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 1, 2] //传入倍速可选数组
  });
});

---

温馨提示： 如果遇到以下错误

 ERROR  Cannot find module 'core-js/modules/es.array.find.js'
Require stack:

解决：

yarn add core-js

原因：xgplayer模块依赖于core-js的某个特定部分（es.array.find.js），但是在你的项目环境中并没有安装这个特定的core-js模块。所以要按照core-js。

---

感谢观看！