Randall/goindex-theme-r
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨Add Video Default Player(plyr) #22 #38

Browse Source
This commit is contained in:
Aicirou 2020-06-24 01:10:41 +08:00
parent f61399b774
commit 4a098d3718
8 changed files with 219 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dependencies-cdn.js
View File

@ -9,7 +9,6 @@ module.exports = [
{ name: 'js-cookie', library: 'Cookies', js: 'https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js', css: '' },
{ name: 'lowdb', library: 'low', js: 'https://cdn.jsdelivr.net/npm/lowdb@1.0.0/dist/low.min.js', css: '' },
{ name: 'lowdb/adapters/LocalStorage', library: 'LocalStorage', js: 'https://cdn.jsdelivr.net/npm/lowdb@1.0.0/dist/LocalStorage.min.js', css: '' },
{ name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
{ name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_axq33n6snd.js', css: '' },
{ name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' },
{ name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' },

83
package-lock.json generated
View File

@ -4111,6 +4111,11 @@
"array-find-index": "^1.0.1"
}
},
"custom-event-polyfill": {
"version": "1.0.7",
"resolved": "https://registry.npm.taobao.org/custom-event-polyfill/download/custom-event-polyfill-1.0.7.tgz",
"integrity": "sha1-m8mT3dqTfBowzNM1YUxsWMT4eu4="
},
"cyclist": {
"version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz",
@ -4775,6 +4780,11 @@
"is-symbol": "^1.0.2"
}
},
"es6-promise": {
"version": "4.2.8",
"resolved": "https://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.8.tgz",
"integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo="
},
"escape-html": {
"version": "1.0.3",
"resolved": "http://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz",
@ -5516,6 +5526,15 @@
"readable-stream": "^2.3.6"
}
},
"flv.js": {
"version": "1.5.0",
"resolved": "https://registry.npm.taobao.org/flv.js/download/flv.js-1.5.0.tgz",
"integrity": "sha1-+lm+1DkdcENc+odArEDsAHDvmK4=",
"requires": {
"es6-promise": "^4.2.5",
"webworkify": "^1.5.0"
}
},
"follow-redirects": {
"version": "1.11.0",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.11.0.tgz?cache=0&sync_timestamp=1585479417937&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.11.0.tgz",
@ -6527,6 +6546,22 @@
"integrity": "sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4=",
"dev": true
},
"hls.js": {
"version": "0.13.2",
"resolved": "https://registry.npm.taobao.org/hls.js/download/hls.js-0.13.2.tgz",
"integrity": "sha1-Pn3SjjeHxpxqukK2SxHrLDyMKfE=",
"requires": {
"eventemitter3": "3.1.0",
"url-toolkit": "^2.1.6"
},
"dependencies": {
"eventemitter3": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.0.tgz?cache=0&sync_timestamp=1589283105849&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-3.1.0.tgz",
"integrity": "sha1-CQtNbNvWRe0Qv3UNS1QHlC17oWM="
}
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz",
@ -7702,6 +7737,11 @@
}
}
},
"loadjs": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/loadjs/download/loadjs-4.2.0.tgz",
"integrity": "sha1-KgM2N2OXpqQ+35jJ7DIp3dWrtvY="
},
"locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz",
@ -9988,6 +10028,11 @@
"integrity": "sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=",
"dev": true
},
"rangetouch": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/rangetouch/download/rangetouch-2.0.1.tgz",
"integrity": "sha1-wBEFEQ/Tr8oq3LGlgGkoN9iDy3A="
},
"raw-body": {
"version": "2.4.0",
"resolved": "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz",
@ -12152,6 +12197,16 @@
"requires-port": "^1.0.0"
}
},
"url-polyfill": {
"version": "1.1.9",
"resolved": "https://registry.npm.taobao.org/url-polyfill/download/url-polyfill-1.1.9.tgz",
"integrity": "sha1-LI1CJIiaXJQoAPcI9VhTaAhWA9k="
},
"url-toolkit": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/url-toolkit/download/url-toolkit-2.2.0.tgz",
"integrity": "sha1-mle4nzFdS33DQOFQvPpUjd9fXOk="
},
"use": {
"version": "3.1.1",
"resolved": "http://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@ -12542,6 +12597,29 @@
}
}
},
"vue-plyr": {
"version": "6.0.4",
"resolved": "https://registry.npm.taobao.org/vue-plyr/download/vue-plyr-6.0.4.tgz",
"integrity": "sha1-eINNx0U3rjBtGNni5csNQqFxjv0=",
"requires": {
"plyr": "^3.5.6",
"vue": "^2.6.10"
},
"dependencies": {
"plyr": {
"version": "3.6.2",
"resolved": "https://registry.npm.taobao.org/plyr/download/plyr-3.6.2.tgz",
"integrity": "sha1-WlW2CKzRYSYt4cx1yoQ6pkNVoFE=",
"requires": {
"core-js": "^3.6.5",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",
"url-polyfill": "^1.1.8"
}
}
}
},
"vue-router": {
"version": "3.1.6",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588196200689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
@ -13033,6 +13111,11 @@
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
"dev": true
},
"webworkify": {
"version": "1.5.0",
"resolved": "https://registry.npm.taobao.org/webworkify/download/webworkify-1.5.0.tgz",
"integrity": "sha1-c0rYendN5uvdVG4dPgJ9pbj0pCw="
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",

4
package.json
View File

@ -16,12 +16,15 @@
"core-js": "^3.6.4",
"element-ui": "^2.13.1",
"feb-alive": "^1.0.9",
"flv.js": "^1.5.0",
"hls.js": "^0.13.2",
"js-base64": "^2.5.2",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"lowdb": "^1.0.0",
"marked": "^1.1.0",
"node-sass": "^4.14.0",
"plyr": "^3.6.2",
"sass-loader": "^8.0.2",
"v-viewer": "^1.5.1",
"vue": "^2.6.11",
@ -31,6 +34,7 @@
"vue-i18n": "^8.17.3",
"vue-infinite-loading": "^2.4.5",
"vue-lazyload": "^1.3.3",
"vue-plyr": "^6.0.4",
"vue-router": "^3.1.6",
"vuex": "^3.4.0"
},

3
public/index.html
View File

@ -44,7 +44,8 @@
desc: true,
},
player: {
api: "https://api.jsonpop.cn/demo/blplyaer/?url="
api: "",
autoplay: true
}
}
window.gdconfig = JSON.parse(JSON.stringify({ version: authConfig.version, themeOptions: themeOptions }));

4
src/main.js
View File

@ -13,9 +13,10 @@ import store from "@/store/index";
import VueClipboard from "vue-clipboard2";
import VueLazyload from "vue-lazyload";
import Viewer from "v-viewer";
import VuePlyr from "vue-plyr";
import cdnpath from "./libs/util.cdn";
// 组件
import '@/components'
import "@/components";
import "viewerjs/dist/viewer.css";
import "@/assets/style/theme/register.scss";
@ -31,6 +32,7 @@ Vue.use(VueLazyload, {
loading: cdnpath("images/airplane.gif"),
});
Vue.use(Viewer);
Vue.use(VuePlyr);
new Vue({
router,

2
src/utils/AcrouUtil.js
View File

@ -13,7 +13,7 @@ const text_exts = [
"sh",
"md",
];
const video_exts = ["mp4", "webm", "mkv", "m3u8"];
const video_exts = ["mp4", "webm", "mkv", "m3u8", "flv"];
const image_exts = ["bmp", "jpg", "jpeg", "png", "gif"];
const pdf_exts = ["pdf"];

90
src/views/page/GoVideo.vue
View File

@ -14,9 +14,20 @@
allowfullscreen="true"
></iframe>
</div>
<video v-else style="width:100%;" preload controls>
<source :src="videoUrl" type="video/mp4" />
</video>
<div v-else>
<vue-plyr ref="plyr" :options="{ autoplay: player.autoplay }">
<video>
<source :src="videoUrl" type="video/mp4" />
<!-- <track
kind="captions"
label="English"
srclang="en"
src="captions-en.vtt"
default
/> -->
</video>
</vue-plyr>
</div>
<div class="card">
<header class="card-header">
<p class="card-header-title">
@ -62,6 +73,8 @@
<script>
import { decode64 } from "@utils/AcrouUtil";
import Hls from "hls.js";
import flvjs from "flv.js";
export default {
data: function() {
return {
@ -72,15 +85,84 @@ export default {
},
methods: {
render() {
// 便于开发环境调试
let path = encodeURI(this.url);
let index = path.lastIndexOf(".");
this.suffix = path.substring(index + 1, path.length);
this.videoUrl = window.location.origin + encodeURI(this.url);
this.apiUrl = this.player.api + this.videoUrl;
if (!this.player || !this.player.api) {
let options = { src: this.videoUrl, media: this.plyr.media };
if (this.suffix === "m3u8") {
this.hls(options);
} else if (this.suffix === "flv") {
this.flv(options);
}
}
},
hls({ src, media }) {
// eslint-disable-next-line no-undef
if (Hls.isSupported()) {
// For more Hls.js options, see https://github.com/dailymotion/hls.js
// eslint-disable-next-line no-undef
const hls = new Hls();
hls.loadSource(src);
hls.attachMedia(media);
hls.on(Hls.Events.ERROR, function(event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
hls.startLoad();
break;
default:
hls.destroy();
break;
}
}
});
if (this.player.autoplay) {
hls.on(Hls.Events.MANIFEST_PARSED, function() {
media.play();
});
}
window.hls = hls;
// Handle changing captions
this.plyr.on("languagechange", () => {
// Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
setTimeout(() => (hls.subtitleTrack = this.plyr.currentTrack), 50);
});
}
},
flv({ src, media }) {
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: "flv",
url: src,
});
flvPlayer.attachMediaElement(media);
flvPlayer.load();
flvPlayer.on(flvjs.Events.ERROR, (event) => {
switch (event) {
case flvjs.ErrorTypes.NETWORK_ERROR:
flvPlayer.load();
break;
default:
flvPlayer.destroy();
break;
}
});
if (this.player.autoplay) {
flvPlayer.play();
}
}
},
},
activated() {
this.render();
},
computed: {
plyr() {
return this.$refs.plyr.player;
},
url() {
if (this.$route.params.path) {
return decode64(this.$route.params.path);

41
yarn.lock
View File

@ -2943,6 +2943,11 @@ currently-unhandled@^0.4.1:
dependencies:
array-find-index "^1.0.1"
custom-event-polyfill@^1.0.7:
version "1.0.7"
resolved "https://registry.npm.taobao.org/custom-event-polyfill/download/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
integrity sha1-m8mT3dqTfBowzNM1YUxsWMT4eu4=
cyclist@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@ -5301,6 +5306,11 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4
emojis-list "^3.0.0"
json5 "^1.0.1"
loadjs@^4.2.0:
version "4.2.0"
resolved "https://registry.npm.taobao.org/loadjs/download/loadjs-4.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floadjs%2Fdownload%2Floadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
integrity sha1-KgM2N2OXpqQ+35jJ7DIp3dWrtvY=
locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@ -6511,6 +6521,17 @@ pkg-up@^2.0.0:
dependencies:
find-up "^2.1.0"
plyr@^3.5.6, plyr@^3.6.2:
version "3.6.2"
resolved "https://registry.npm.taobao.org/plyr/download/plyr-3.6.2.tgz#5a55b608acd161262de1cc75ca843aa64355a051"
integrity sha1-WlW2CKzRYSYt4cx1yoQ6pkNVoFE=
dependencies:
core-js "^3.6.5"
custom-event-polyfill "^1.0.7"
loadjs "^4.2.0"
rangetouch "^2.0.1"
url-polyfill "^1.1.8"
pnp-webpack-plugin@^1.6.4:
version "1.6.4"
resolved "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
@ -7048,6 +7069,11 @@ range-parser@^1.2.1, range-parser@~1.2.1:
resolved "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
integrity sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=
rangetouch@^2.0.1:
version "2.0.1"
resolved "https://registry.npm.taobao.org/rangetouch/download/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
integrity sha1-wBEFEQ/Tr8oq3LGlgGkoN9iDy3A=
raw-body@2.4.0:
version "2.4.0"
resolved "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@ -8594,6 +8620,11 @@ url-parse@^1.4.3:
querystringify "^2.1.1"
requires-port "^1.0.0"
url-polyfill@^1.1.8:
version "1.1.9"
resolved "https://registry.npm.taobao.org/url-polyfill/download/url-polyfill-1.1.9.tgz#2c8d4224889a5c942800f708f5585368085603d9"
integrity sha1-LI1CJIiaXJQoAPcI9VhTaAhWA9k=
url@^0.11.0:
version "0.11.0"
resolved "https://registry.npm.taobao.org/url/download/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@ -8798,6 +8829,14 @@ vue-loader@^15.9.1:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-plyr@^6.0.4:
version "6.0.4"
resolved "https://registry.npm.taobao.org/vue-plyr/download/vue-plyr-6.0.4.tgz#78834dc74537ae306d18d9e2e5cb0d42a1718efd"
integrity sha1-eINNx0U3rjBtGNni5csNQqFxjv0=
dependencies:
plyr "^3.5.6"
vue "^2.6.10"
vue-router@^3.1.6:
version "3.3.1"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.1.tgz?cache=0&sync_timestamp=1590599727341&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.1.tgz#7d0545dd8ebf4f45494ca185b7eccb38d67689c1"
@ -8824,7 +8863,7 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
vue@^2.6.11:
vue@^2.6.10, vue@^2.6.11:
version "2.6.11"
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=