mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 00:47:19 +08:00
feat：添加西瓜播放器示例
This commit is contained in:
张益铭
parent
bc37d3edd6
commit
01c8619124
196
package-lock.json
generated
196
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"404": "404",
|
||||
"401": "401",
|
||||
"components": "组件",
|
||||
"split-pane": "切割面板",
|
||||
"draggable": "拖拽组件"
|
||||
"video": "视频组件",
|
||||
"draggable": "拖拽组件",
|
||||
"split-pane": "切割面板"
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
@ -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',
|
||||
|
||||
34
src/views/components/video/index.vue
Normal file
34
src/views/components/video/index.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user