diff --git a/package.json b/package.json
index 4f17e18c..fe519c26 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "vditor": "^3.8.7",
     "vue": "^3.2.20",
     "vue-router": "^4.0.11",
-    "wangeditor": "^4.7.9"
+    "wangeditor": "^4.7.9",
+    "xgplayer": "^2.31.1"
   },
   "devDependencies": {
     "@amap/amap-jsapi-types": "^0.0.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 521723dc..ca3e9922 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,7 @@ specifiers:
   vueuc: ^0.4.15
   wangeditor: ^4.7.9
   windicss: ^3.2.1
+  xgplayer: ^2.31.1
 
 dependencies:
   '@antv/g2plot': registry.npmmirror.com/@antv/g2plot/2.3.39
@@ -73,6 +74,7 @@ dependencies:
   vue: registry.npmmirror.com/vue/3.2.20
   vue-router: registry.nlark.com/vue-router/4.0.11_vue@3.2.20
   wangeditor: registry.npmmirror.com/wangeditor/4.7.9
+  xgplayer: registry.npmmirror.com/xgplayer/2.31.1
 
 devDependencies:
   '@amap/amap-jsapi-types': registry.npmmirror.com/@amap/amap-jsapi-types/0.0.8
@@ -940,13 +942,12 @@ packages:
     dev: false
 
   registry.nlark.com/ansi-styles/3.2.1:
-    resolution: {integrity: sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-styles/download/ansi-styles-3.2.1.tgz}
+    resolution: {integrity: sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-styles/download/ansi-styles-3.2.1.tgz}
     name: ansi-styles
     version: 3.2.1
     engines: {node: '>=4'}
     dependencies:
       color-convert: registry.nlark.com/color-convert/1.9.3
-    dev: true
 
   registry.nlark.com/ansi-styles/4.3.0:
     resolution: {integrity: sha1-7dgDYornHATIWuegkG7a00tkiTc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz}
@@ -1143,7 +1144,7 @@ packages:
     dev: false
 
   registry.nlark.com/chalk/2.4.2:
-    resolution: {integrity: sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1631500162796&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz}
+    resolution: {integrity: sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1631500162796&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz}
     name: chalk
     version: 2.4.2
     engines: {node: '>=4'}
@@ -1151,7 +1152,6 @@ packages:
       ansi-styles: registry.nlark.com/ansi-styles/3.2.1
       escape-string-regexp: registry.nlark.com/escape-string-regexp/1.0.5
       supports-color: registry.nlark.com/supports-color/5.5.0
-    dev: true
 
   registry.nlark.com/chalk/4.1.2:
     resolution: {integrity: sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1631500162796&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz}
@@ -1253,7 +1253,6 @@ packages:
     version: 1.9.3
     dependencies:
       color-name: registry.nlark.com/color-name/1.1.3
-    dev: true
 
   registry.nlark.com/color-convert/2.0.1:
     resolution: {integrity: sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz}
@@ -1267,7 +1266,6 @@ packages:
     resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-name/download/color-name-1.1.3.tgz}
     name: color-name
     version: 1.1.3
-    dev: true
 
   registry.nlark.com/color-name/1.1.4:
     resolution: {integrity: sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz}
@@ -1452,6 +1450,15 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  registry.nlark.com/d/1.0.1:
+    resolution: {integrity: sha1-hpgJU3LVjb7jRv/Qxwk/mfj561o=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/d/download/d-1.0.1.tgz}
+    name: d
+    version: 1.0.1
+    dependencies:
+      es5-ext: registry.nlark.com/es5-ext/0.10.53
+      type: registry.nlark.com/type/1.2.0
+    dev: false
+
   registry.nlark.com/d3-color/1.4.1:
     resolution: {integrity: sha1-xSACv4hGraRCTVXZeYL+8m6zvIo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/d3-color/download/d3-color-1.4.1.tgz}
     name: d3-color
@@ -1806,6 +1813,35 @@ packages:
       is-date-object: registry.nlark.com/is-date-object/1.0.5
       is-symbol: registry.nlark.com/is-symbol/1.0.4
 
+  registry.nlark.com/es5-ext/0.10.53:
+    resolution: {integrity: sha1-k8WjrP2+8nUiCtcmRK0C7hg2jeE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/es5-ext/download/es5-ext-0.10.53.tgz}
+    name: es5-ext
+    version: 0.10.53
+    dependencies:
+      es6-iterator: registry.nlark.com/es6-iterator/2.0.3
+      es6-symbol: registry.nlark.com/es6-symbol/3.1.3
+      next-tick: registry.nlark.com/next-tick/1.0.0
+    dev: false
+
+  registry.nlark.com/es6-iterator/2.0.3:
+    resolution: {integrity: sha1-p96IkUGgWpSwhUQDstCg+/qY87c=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/es6-iterator/download/es6-iterator-2.0.3.tgz}
+    name: es6-iterator
+    version: 2.0.3
+    dependencies:
+      d: registry.nlark.com/d/1.0.1
+      es5-ext: registry.nlark.com/es5-ext/0.10.53
+      es6-symbol: registry.nlark.com/es6-symbol/3.1.3
+    dev: false
+
+  registry.nlark.com/es6-symbol/3.1.3:
+    resolution: {integrity: sha1-utXTwbzawoJp9MszHkMceKxwXRg=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/es6-symbol/download/es6-symbol-3.1.3.tgz}
+    name: es6-symbol
+    version: 3.1.3
+    dependencies:
+      d: registry.nlark.com/d/1.0.1
+      ext: registry.npmmirror.com/ext/1.6.0
+    dev: false
+
   registry.nlark.com/escalade/3.1.1:
     resolution: {integrity: sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/escalade/download/escalade-3.1.1.tgz}
     name: escalade
@@ -1930,6 +1966,14 @@ packages:
       eslint-visitor-keys: registry.npmmirror.com/eslint-visitor-keys/3.0.0
     dev: true
 
+  registry.nlark.com/esprima/1.2.5:
+    resolution: {integrity: sha1-CZNQL+r2aBODJXVvMPmlH+7sEek=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/esprima/download/esprima-1.2.5.tgz}
+    name: esprima
+    version: 1.2.5
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: false
+
   registry.nlark.com/esquery/1.4.0:
     resolution: {integrity: sha1-IUj/w4uC6McFff7UhCWz5h8PJKU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/esquery/download/esquery-1.4.0.tgz}
     name: esquery
@@ -1959,6 +2003,21 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  registry.nlark.com/event-emitter/0.3.5:
+    resolution: {integrity: sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/event-emitter/download/event-emitter-0.3.5.tgz}
+    name: event-emitter
+    version: 0.3.5
+    dependencies:
+      d: registry.nlark.com/d/1.0.1
+      es5-ext: registry.nlark.com/es5-ext/0.10.53
+    dev: false
+
+  registry.nlark.com/eventemitter3/4.0.7:
+    resolution: {integrity: sha1-Lem2j2Uo1WRO9cWVJqG0oHMGFp8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/eventemitter3/download/eventemitter3-4.0.7.tgz}
+    name: eventemitter3
+    version: 4.0.7
+    dev: false
+
   registry.nlark.com/evtd/0.2.2:
     resolution: {integrity: sha1-vrvifhWu3B1cGLwmIN/JDyYHh8M=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/evtd/download/evtd-0.2.2.tgz}
     name: evtd
@@ -2152,20 +2211,30 @@ packages:
     version: 10.0.0
     engines: {node: '>=12'}
     dependencies:
-      graceful-fs: registry.nlark.com/graceful-fs/4.2.8
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
       jsonfile: registry.nlark.com/jsonfile/6.1.0
       universalify: registry.nlark.com/universalify/2.0.0
     dev: true
 
+  registry.nlark.com/fs-extra/5.0.0:
+    resolution: {integrity: sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fs-extra/download/fs-extra-5.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffs-extra%2Fdownload%2Ffs-extra-5.0.0.tgz}
+    name: fs-extra
+    version: 5.0.0
+    dependencies:
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+      jsonfile: registry.nlark.com/jsonfile/4.0.0
+      universalify: registry.nlark.com/universalify/0.1.2
+    dev: false
+
   registry.nlark.com/fs-extra/7.0.1:
     resolution: {integrity: sha1-TxicRKoSO4lfcigE9V6iPq3DSOk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fs-extra/download/fs-extra-7.0.1.tgz}
     name: fs-extra
     version: 7.0.1
     engines: {node: '>=6 <7 || >=8'}
     dependencies:
-      graceful-fs: registry.nlark.com/graceful-fs/4.2.8
-      jsonfile: 4.0.0
-      universalify: 0.1.2
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+      jsonfile: registry.nlark.com/jsonfile/4.0.0
+      universalify: registry.nlark.com/universalify/0.1.2
     dev: true
 
   registry.nlark.com/fs-extra/8.1.0:
@@ -2336,7 +2405,6 @@ packages:
     name: has-flag
     version: 3.0.0
     engines: {node: '>=4'}
-    dev: true
 
   registry.nlark.com/has-flag/4.0.0:
     resolution: {integrity: sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz}
@@ -2788,6 +2856,13 @@ packages:
     version: 3.0.0
     dev: true
 
+  registry.nlark.com/jsonfile/4.0.0:
+    resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jsonfile/download/jsonfile-4.0.0.tgz}
+    name: jsonfile
+    version: 4.0.0
+    optionalDependencies:
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+
   registry.nlark.com/jsonfile/6.1.0:
     resolution: {integrity: sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jsonfile/download/jsonfile-6.1.0.tgz}
     name: jsonfile
@@ -2835,7 +2910,7 @@ packages:
     name: klaw-sync
     version: 6.0.0
     dependencies:
-      graceful-fs: registry.nlark.com/graceful-fs/4.2.8
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
     dev: true
 
   registry.nlark.com/kolorist/1.5.0:
@@ -3069,6 +3144,12 @@ packages:
     version: 1.4.0
     dev: true
 
+  registry.nlark.com/next-tick/1.0.0:
+    resolution: {integrity: sha1-yobR/ogoFpsBICCOPchCS524NCw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/next-tick/download/next-tick-1.0.0.tgz}
+    name: next-tick
+    version: 1.0.0
+    dev: false
+
   registry.nlark.com/no-case/3.0.4:
     resolution: {integrity: sha1-02H9XJgA9VhVGoNp/A3NRmK2Ek0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/no-case/download/no-case-3.0.4.tgz}
     name: no-case
@@ -3917,6 +3998,15 @@ packages:
       amdefine: registry.nlark.com/amdefine/1.0.1
     dev: false
 
+  registry.nlark.com/source-map/0.1.43:
+    resolution: {integrity: sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/source-map/download/source-map-0.1.43.tgz}
+    name: source-map
+    version: 0.1.43
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      amdefine: registry.nlark.com/amdefine/1.0.1
+    dev: false
+
   registry.nlark.com/source-map/0.5.7:
     resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/source-map/download/source-map-0.5.7.tgz}
     name: source-map
@@ -4059,13 +4149,12 @@ packages:
     dev: false
 
   registry.nlark.com/supports-color/5.5.0:
-    resolution: {integrity: sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/supports-color/download/supports-color-5.5.0.tgz}
+    resolution: {integrity: sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/supports-color/download/supports-color-5.5.0.tgz}
     name: supports-color
     version: 5.5.0
     engines: {node: '>=4'}
     dependencies:
       has-flag: registry.nlark.com/has-flag/3.0.0
-    dev: true
 
   registry.nlark.com/supports-color/7.2.0:
     resolution: {integrity: sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz}
@@ -4248,6 +4337,18 @@ packages:
       prelude-ls: registry.nlark.com/prelude-ls/1.2.1
     dev: true
 
+  registry.nlark.com/type/1.2.0:
+    resolution: {integrity: sha1-hI3XaY2vo+VKbEeedZxLw/GIR6A=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/type/download/type-1.2.0.tgz}
+    name: type
+    version: 1.2.0
+    dev: false
+
+  registry.nlark.com/type/2.5.0:
+    resolution: {integrity: sha1-Ci54wud5B7JSq+XymMGwHGPw2z0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/type/download/type-2.5.0.tgz}
+    name: type
+    version: 2.5.0
+    dev: false
+
   registry.nlark.com/uglify-to-browserify/1.0.2:
     resolution: {integrity: sha1-bgkk1r2mta/jSeOabWMoUKD4grc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/uglify-to-browserify/download/uglify-to-browserify-1.0.2.tgz}
     name: uglify-to-browserify
@@ -4266,6 +4367,12 @@ packages:
       has-symbols: registry.nlark.com/has-symbols/1.0.2
       which-boxed-primitive: registry.nlark.com/which-boxed-primitive/1.0.2
 
+  registry.nlark.com/universalify/0.1.2:
+    resolution: {integrity: sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/universalify/download/universalify-0.1.2.tgz}
+    name: universalify
+    version: 0.1.2
+    engines: {node: '>= 4.0.0'}
+
   registry.nlark.com/universalify/2.0.0:
     resolution: {integrity: sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/universalify/download/universalify-2.0.0.tgz}
     name: universalify
@@ -5528,13 +5635,12 @@ packages:
     dev: true
 
   registry.npmmirror.com/commander/2.20.3:
-    resolution: {integrity: sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/download/commander-2.20.3.tgz}
+    resolution: {integrity: sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/download/commander-2.20.3.tgz}
     name: commander
     version: 2.20.3
-    dev: true
 
   registry.npmmirror.com/commander/4.1.1:
-    resolution: {integrity: sha1-n9YCvZNilOnp70aj9NaWQESxgGg=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/download/commander-4.1.1.tgz}
+    resolution: {integrity: sha1-n9YCvZNilOnp70aj9NaWQESxgGg=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/download/commander-4.1.1.tgz}
     name: commander
     version: 4.1.1
     engines: {node: '>= 6'}
@@ -5575,6 +5681,14 @@ packages:
     requiresBuild: true
     dev: false
 
+  registry.npmmirror.com/danmu.js/0.5.10:
+    resolution: {integrity: sha1-YW8wjzU+78H3ucaKhVEwscOIjL8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/danmu.js/download/danmu.js-0.5.10.tgz}
+    name: danmu.js
+    version: 0.5.10
+    dependencies:
+      event-emitter: registry.nlark.com/event-emitter/0.3.5
+    dev: false
+
   registry.npmmirror.com/date-fns/2.25.0:
     resolution: {integrity: sha1-jFyPHZWL44CamgP0t0LrqJT8VoA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/date-fns/download/date-fns-2.25.0.tgz}
     name: date-fns
@@ -5610,6 +5724,21 @@ packages:
     version: 1.2.0
     engines: {node: '>=0.10.0'}
 
+  registry.npmmirror.com/downloadjs/1.4.7:
+    resolution: {integrity: sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/downloadjs/download/downloadjs-1.4.7.tgz}
+    name: downloadjs
+    version: 1.4.7
+    dev: false
+
+  registry.npmmirror.com/draggabilly/2.3.0:
+    resolution: {integrity: sha1-4OZT4JuTjreuZUxLdgARSySi7lA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/draggabilly/download/draggabilly-2.3.0.tgz}
+    name: draggabilly
+    version: 2.3.0
+    dependencies:
+      get-size: registry.npmmirror.com/get-size/2.0.3
+      unidragger: registry.npmmirror.com/unidragger/2.3.1
+    dev: false
+
   registry.npmmirror.com/emoji-regex/8.0.0:
     resolution: {integrity: sha1-6Bj9ac5cz8tARZT4QpY79TFkzDc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/emoji-regex/download/emoji-regex-8.0.0.tgz}
     name: emoji-regex
@@ -5797,6 +5926,20 @@ packages:
     version: 5.2.0
     engines: {node: '>=4.0'}
 
+  registry.npmmirror.com/ev-emitter/1.1.1:
+    resolution: {integrity: sha1-jxiwzlx2pdGAF/ccCnlcZbkTjyo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ev-emitter/download/ev-emitter-1.1.1.tgz}
+    name: ev-emitter
+    version: 1.1.1
+    dev: false
+
+  registry.npmmirror.com/ext/1.6.0:
+    resolution: {integrity: sha1-OHHVBkHodMwXLitT+RmELRnbTFI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ext/download/ext-1.6.0.tgz}
+    name: ext
+    version: 1.6.0
+    dependencies:
+      type: registry.nlark.com/type/2.5.0
+    dev: false
+
   registry.npmmirror.com/find-up/2.1.0:
     resolution: {integrity: sha1-RdG35QbHF93UgndaK3eSCjwMV6c=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/find-up/download/find-up-2.1.0.tgz?cache=0&sync_timestamp=1633619099767&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffind-up%2Fdownload%2Ffind-up-2.1.0.tgz}
     name: find-up
@@ -5836,6 +5979,21 @@ packages:
     dev: true
     optional: true
 
+  registry.npmmirror.com/generate-source-map/0.0.5:
+    resolution: {integrity: sha1-8SVfMWU8sCMeZxOn3IN1r08zpQk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/generate-source-map/download/generate-source-map-0.0.5.tgz}
+    name: generate-source-map
+    version: 0.0.5
+    dependencies:
+      esprima: registry.nlark.com/esprima/1.2.5
+      source-map: registry.nlark.com/source-map/0.1.43
+    dev: false
+
+  registry.npmmirror.com/get-size/2.0.3:
+    resolution: {integrity: sha1-VKHQJWsg6nrGRlFnViAnaZQa0u8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/get-size/download/get-size-2.0.3.tgz}
+    name: get-size
+    version: 2.0.3
+    dev: false
+
   registry.npmmirror.com/gl-matrix/3.4.3:
     resolution: {integrity: sha1-/BGR6DIACf1NIOkzlZXGBB3cIsk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/gl-matrix/download/gl-matrix-3.4.3.tgz}
     name: gl-matrix
@@ -5885,8 +6043,6 @@ packages:
     resolution: {integrity: sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz}
     name: graceful-fs
     version: 4.2.8
-    dev: true
-    optional: true
 
   registry.npmmirror.com/highlight.js/11.2.0:
     resolution: {integrity: sha1-p+O4wf3E8FOLk7LcLd1TpAxqsPA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/highlight.js/download/highlight.js-11.2.0.tgz}
@@ -6447,6 +6603,22 @@ packages:
       uglify-to-browserify: registry.nlark.com/uglify-to-browserify/1.0.2
     dev: false
 
+  registry.npmmirror.com/unidragger/2.3.1:
+    resolution: {integrity: sha1-Low0/v9hr/qW3IlSNN38HqTsdRU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/unidragger/download/unidragger-2.3.1.tgz}
+    name: unidragger
+    version: 2.3.1
+    dependencies:
+      unipointer: registry.npmmirror.com/unipointer/2.3.0
+    dev: false
+
+  registry.npmmirror.com/unipointer/2.3.0:
+    resolution: {integrity: sha1-ug3EYs4xwqiOgIEOGcO64M5H7Z8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/unipointer/download/unipointer-2.3.0.tgz}
+    name: unipointer
+    version: 2.3.0
+    dependencies:
+      ev-emitter: registry.npmmirror.com/ev-emitter/1.1.1
+    dev: false
+
   registry.npmmirror.com/unplugin-icons/0.12.18_1eae5c0bb2742054245c1d4b923e348d:
     resolution: {integrity: sha1-AVYljI5A+Q1Ke6CXDuUWfMljGKw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/unplugin-icons/download/unplugin-icons-0.12.18.tgz}
     id: registry.npmmirror.com/unplugin-icons/0.12.18
@@ -6854,6 +7026,31 @@ packages:
     hasBin: true
     dev: true
 
+  registry.npmmirror.com/xgplayer-subtitles/1.0.21:
+    resolution: {integrity: sha1-btQ2EJIP27Gj/JYGSAFdEVw9wkw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/xgplayer-subtitles/download/xgplayer-subtitles-1.0.21.tgz}
+    name: xgplayer-subtitles
+    version: 1.0.21
+    dependencies:
+      eventemitter3: registry.nlark.com/eventemitter3/4.0.7
+      generate-source-map: registry.npmmirror.com/generate-source-map/0.0.5
+    dev: false
+
+  registry.npmmirror.com/xgplayer/2.31.1:
+    resolution: {integrity: sha1-fybKTm0rCK4ifwH356tnHJOK2i0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/xgplayer/download/xgplayer-2.31.1.tgz}
+    name: xgplayer
+    version: 2.31.1
+    hasBin: true
+    dependencies:
+      chalk: registry.nlark.com/chalk/2.4.2
+      commander: registry.npmmirror.com/commander/2.20.3
+      danmu.js: registry.npmmirror.com/danmu.js/0.5.10
+      downloadjs: registry.npmmirror.com/downloadjs/1.4.7
+      draggabilly: registry.npmmirror.com/draggabilly/2.3.0
+      event-emitter: registry.nlark.com/event-emitter/0.3.5
+      fs-extra: registry.nlark.com/fs-extra/5.0.0
+      xgplayer-subtitles: registry.npmmirror.com/xgplayer-subtitles/1.0.21
+    dev: false
+
   registry.npmmirror.com/yargs/16.2.0:
     resolution: {integrity: sha1-HIK/D2tqZur85+8w43b0mhJHf2Y=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/yargs/download/yargs-16.2.0.tgz}
     name: yargs
diff --git a/src/views/component/video/index.vue b/src/views/component/video/index.vue
index 5cccc21f..1dfac56e 100644
--- a/src/views/component/video/index.vue
+++ b/src/views/component/video/index.vue
@@ -1,6 +1,30 @@
 <template>
-  <div>视频</div>
+  <div>
+    <n-card title="视频播放器插件" class="h-full shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+    </n-card>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { NCard } from 'naive-ui';
+import Player from 'xgplayer';
+
+const domRef = ref<HTMLElement | null>(null);
+
+function renderXgPlayer() {
+  const url = 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4';
+  const player = new Player({
+    el: domRef.value!,
+    url,
+    playbackRate: [0.5, 0.75, 1, 1.5, 2]
+  });
+  return player;
+}
+
+onMounted(() => {
+  renderXgPlayer();
+});
+</script>
 <style scoped></style>