feat：添加西瓜播放器示例

package-lock.json

@@ -216,6 +216,14 @@
       "integrity": "sha1-1lV2Qw/ErTg9x8gpEYeY5RaReNQ=",
       "dev": true
     },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "http://192.168.250.101:4873/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
     "anymatch": {
       "version": "3.1.1",
       "resolved": "http://192.168.250.101:4873/anymatch/-/anymatch-3.1.1.tgz",
@@ -310,6 +318,16 @@
       "integrity": "sha1-ustDK2cB9pDIxffGgBZrmp8IQ9k=",
       "dev": true
     },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "http://192.168.250.101:4873/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
     "chokidar": {
       "version": "3.5.1",
       "resolved": "http://192.168.250.101:4873/chokidar/-/chokidar-3.5.1.tgz",
@@ -326,12 +344,30 @@
         "readdirp": "~3.5.0"
       }
     },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "http://192.168.250.101:4873/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "http://192.168.250.101:4873/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
     "colorette": {
       "version": "1.2.1",
       "resolved": "http://192.168.250.101:4873/colorette/-/colorette-1.2.1.tgz",
       "integrity": "sha1-TQuSEyXBT6+SYzCGpTbbbolWSxs=",
       "dev": true
     },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "http://192.168.250.101:4873/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM="
+    },
     "consolidate": {
       "version": "0.16.0",
       "resolved": "http://192.168.250.101:4873/consolidate/-/consolidate-0.16.0.tgz",
@@ -352,6 +388,23 @@
       "resolved": "http://192.168.250.101:4873/csstype/-/csstype-2.6.16.tgz",
       "integrity": "sha1-VE1p9UcBO4WkDRW/912zjzT+nDk="
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "http://192.168.250.101:4873/d/-/d-1.0.1.tgz",
+      "integrity": "sha1-hpgJU3LVjb7jRv/Qxwk/mfj561o=",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "danmu.js": {
+      "version": "0.3.3",
+      "resolved": "http://192.168.250.101:4873/danmu.js/-/danmu.js-0.3.3.tgz",
+      "integrity": "sha1-+r9sUb5p6Er9rHW80QWJBPDiTmE=",
+      "requires": {
+        "event-emitter": "^0.3.5"
+      }
+    },
     "dayjs": {
       "version": "1.10.4",
       "resolved": "http://192.168.250.101:4873/dayjs/-/dayjs-1.10.4.tgz",
@@ -362,6 +415,20 @@
       "resolved": "http://192.168.250.101:4873/dotenv/-/dotenv-8.2.0.tgz",
       "integrity": "sha1-l+YZJZradQ7qPk6j4mvO6lQksWo="
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "http://192.168.250.101:4873/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
+    "draggabilly": {
+      "version": "2.3.0",
+      "resolved": "http://192.168.250.101:4873/draggabilly/-/draggabilly-2.3.0.tgz",
+      "integrity": "sha1-4OZT4JuTjreuZUxLdgARSySi7lA=",
+      "requires": {
+        "get-size": "^2.0.2",
+        "unidragger": "^2.3.0"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.673",
       "resolved": "http://192.168.250.101:4873/electron-to-chromium/-/electron-to-chromium-1.3.673.tgz",
@@ -388,6 +455,35 @@
       "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
       "dev": true
     },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "http://192.168.250.101:4873/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha1-k8WjrP2+8nUiCtcmRK0C7hg2jeE=",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "http://192.168.250.101:4873/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "http://192.168.250.101:4873/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha1-utXTwbzawoJp9MszHkMceKxwXRg=",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "esbuild": {
       "version": "0.9.6",
       "resolved": "http://192.168.250.101:4873/esbuild/-/esbuild-0.9.6.tgz",
@@ -400,11 +496,45 @@
       "integrity": "sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=",
       "dev": true
     },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "http://192.168.250.101:4873/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
     "estree-walker": {
       "version": "2.0.2",
       "resolved": "http://192.168.250.101:4873/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw="
     },
+    "ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "http://192.168.250.101:4873/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha1-jxiwzlx2pdGAF/ccCnlcZbkTjyo="
+    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "http://192.168.250.101:4873/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "ext": {
+      "version": "1.4.0",
+      "resolved": "http://192.168.250.101:4873/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha1-ia56BxWPedNVF4gpBDJAd+Q3kkQ=",
+      "requires": {
+        "type": "^2.0.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.5.0",
+          "resolved": "http://192.168.250.101:4873/type/-/type-2.5.0.tgz",
+          "integrity": "sha1-Ci54wud5B7JSq+XymMGwHGPw2z0="
+        }
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "http://192.168.250.101:4873/fill-range/-/fill-range-7.0.1.tgz",
@@ -447,6 +577,11 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "get-size": {
+      "version": "2.0.3",
+      "resolved": "http://192.168.250.101:4873/get-size/-/get-size-2.0.3.tgz",
+      "integrity": "sha1-VKHQJWsg6nrGRlFnViAnaZQa0u8="
+    },
     "glob-parent": {
       "version": "5.1.1",
       "resolved": "http://192.168.250.101:4873/glob-parent/-/glob-parent-5.1.1.tgz",
@@ -465,6 +600,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "http://192.168.250.101:4873/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
     "hash-sum": {
       "version": "2.0.0",
       "resolved": "http://192.168.250.101:4873/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -620,6 +760,11 @@
       "integrity": "sha1-tKr7k+OustgXTKU88WOrfXMIMF8=",
       "dev": true
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "http://192.168.250.101:4873/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
     "node-releases": {
       "version": "1.1.71",
       "resolved": "http://192.168.250.101:4873/node-releases/-/node-releases-1.1.71.tgz",
@@ -864,6 +1009,14 @@
       "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
       "dev": true
     },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "http://192.168.250.101:4873/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "http://192.168.250.101:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -878,12 +1031,33 @@
         "is-number": "^7.0.0"
       }
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "http://192.168.250.101:4873/type/-/type-1.2.0.tgz",
+      "integrity": "sha1-hI3XaY2vo+VKbEeedZxLw/GIR6A="
+    },
     "typescript": {
       "version": "4.2.2",
       "resolved": "http://192.168.250.101:4873/typescript/-/typescript-4.2.2.tgz",
       "integrity": "sha1-FFDwIGGPhy2w6hcxfRbY2o3bjEw=",
       "dev": true
     },
+    "unidragger": {
+      "version": "2.3.1",
+      "resolved": "http://192.168.250.101:4873/unidragger/-/unidragger-2.3.1.tgz",
+      "integrity": "sha1-Low0/v9hr/qW3IlSNN38HqTsdRU=",
+      "requires": {
+        "unipointer": "^2.3.0"
+      }
+    },
+    "unipointer": {
+      "version": "2.3.0",
+      "resolved": "http://192.168.250.101:4873/unipointer/-/unipointer-2.3.0.tgz",
+      "integrity": "sha1-ug3EYs4xwqiOgIEOGcO64M5H7Z8=",
+      "requires": {
+        "ev-emitter": "^1.0.1"
+      }
+    },
     "uniq": {
       "version": "1.0.1",
       "resolved": "http://192.168.250.101:4873/uniq/-/uniq-1.0.1.tgz",
@@ -998,6 +1172,28 @@
       "resolved": "http://192.168.250.101:4873/xe-utils/-/xe-utils-3.1.8.tgz",
       "integrity": "sha1-I2mxYblYwPi9R9nA/rNZCSCIcPE="
     },
+    "xgplayer": {
+      "version": "2.18.3",
+      "resolved": "http://192.168.250.101:4873/xgplayer/-/xgplayer-2.18.3.tgz",
+      "integrity": "sha1-YkuY5ANetS3C2L4XlfXHtnUfFxc=",
+      "requires": {
+        "chalk": "^2.3.2",
+        "commander": "^2.15.1",
+        "danmu.js": "^0.3.3",
+        "downloadjs": "1.4.7",
+        "draggabilly": "^2.2.0",
+        "event-emitter": "^0.3.5",
+        "xgplayer-subtitles": "^1.0.8"
+      }
+    },
+    "xgplayer-subtitles": {
+      "version": "1.0.8",
+      "resolved": "http://192.168.250.101:4873/xgplayer-subtitles/-/xgplayer-subtitles-1.0.8.tgz",
+      "integrity": "sha1-U07HT5uQsK5DeDR36AxW2APVm5U=",
+      "requires": {
+        "event-emitter": "^0.3.5"
+      }
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "http://192.168.250.101:4873/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -25,7 +25,8 @@
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0",
     "vxe-table": "^4.0.0-beta.10",
-    "xe-utils": "^3.1.8"
+    "xe-utils": "^3.1.8",
+    "xgplayer": "^2.18.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.14",

src/locales/ch.json

@@ -7,6 +7,7 @@
   "404": "404",
   "401": "401",
   "components": "组件",
-  "split-pane": "切割面板",
-  "draggable": "拖拽组件"
+  "video": "视频组件",
+  "draggable": "拖拽组件",
+  "split-pane": "切割面板"
 }

src/locales/en.json

@@ -7,6 +7,7 @@
   "404": "404",
   "401": "401",
   "components": "Components",
-  "split-pane": "Split Pane",
-  "draggable": "Draggable Components"
+  "video": "Video Components",
+  "draggable": "Draggable Components",
+  "split-pane": "Split Pane"
 }

src/router/index.ts

@@ -33,10 +33,10 @@ const routes: Array<RouteRecordRaw> = [
     redirect: '/components/split-pane',
     children: [
       {
-        path: '/components/split-pane',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/split-pane/index.vue'),
+        path: '/components/video',
+        component: () => import(/* webpackChunkName: "components" */ '../views/components/video/index.vue'),
         meta: {
-          title: 'split-pane',
+          title: 'video',
           showLink: false,
           savedPosition: true
         }
@@ -50,6 +50,15 @@ const routes: Array<RouteRecordRaw> = [
           savedPosition: true
         }
       },
+      {
+        path: '/components/split-pane',
+        component: () => import(/* webpackChunkName: "components" */ '../views/components/split-pane/index.vue'),
+        meta: {
+          title: 'split-pane',
+          showLink: false,
+          savedPosition: true
+        }
+      }
     ],
     meta: {
       icon: 'el-icon-menu',

src/views/components/video/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="mse"></div>
+</template>
+
+<script lang='ts'>
+import { onMounted } from "vue";
+import Player from "xgplayer/dist/simple_player";
+import { volume, playbackRate, screenShot } from "xgplayer/dist/controls";
+export default {
+  setup() {
+    onMounted(() => {
+      let player = new Player({
+        id: "mse",
+        autoplay: false,
+        screenShot: true,
+        url:
+          "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
+        poster:
+          "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
+        fluid: true,
+        controlPlugins: [volume, playbackRate, screenShot],
+        playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
+      });
+    });
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+#mse {
+  flex: auto;
+}
+</style>