From 54c48c0f8f219228c9ec1e500435e27ffbbd7b7b Mon Sep 17 00:00:00 2001 From: Zhoujiahui <539943419@qq.com> Date: Thu, 26 Sep 2024 17:02:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BAxgplayer=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=E7=B1=BB=E4=BC=BC=E4=BA=8Ebilibili=E7=9A=84?= =?UTF-8?q?=E9=94=81=E5=AE=9A=E7=9A=84=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/miaoPluginTemplate/template.vue | 8 +- src/plugins/miaoVideoPlayer/export.ts | 2 +- .../miaoVideoPlayer/miaoVideoPlayer.vue | 7 +- .../playerPlugin/lockScreen.scss | 46 +++++++ .../playerPlugin/lockScreen.ts | 119 ++++++++++++++++++ 5 files changed, 174 insertions(+), 8 deletions(-) create mode 100644 src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.scss create mode 100644 src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts diff --git a/src/plugins/miaoPluginTemplate/template.vue b/src/plugins/miaoPluginTemplate/template.vue index 96377b3..8f356af 100644 --- a/src/plugins/miaoPluginTemplate/template.vue +++ b/src/plugins/miaoPluginTemplate/template.vue @@ -3,11 +3,11 @@ diff --git a/src/plugins/miaoVideoPlayer/export.ts b/src/plugins/miaoVideoPlayer/export.ts index e24d4e5..ca73297 100644 --- a/src/plugins/miaoVideoPlayer/export.ts +++ b/src/plugins/miaoVideoPlayer/export.ts @@ -15,7 +15,7 @@ const pluginConfig: registerComponentOption = { return false } for (let i of vFiles) { - for (let s of ['mp4']) { + for (let s of ['mp4', 'mp3']) { if (i.name.endsWith(s)) { return true } diff --git a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue index 74b5c1b..9f18c02 100644 --- a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue +++ b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue @@ -15,6 +15,7 @@ import XGPlayer from 'xgplayer' import '@/style/xgplayer.scss' import TextTrack from 'xgplayer/es/plugins/track' import 'xgplayer/es/plugins/track/index.css' +import lockScreen from './playerPlugin/lockScreen' import axios from 'axios' import { uniq } from 'lodash' // import config from '@/config' @@ -93,7 +94,7 @@ const { setVideo } = (() => { } _player && _player.destroy() _player = new XGPlayer({ - plugins: [TextTrack], + plugins: [TextTrack, lockScreen], el: xgPlayer.value, url: videoVFile.url, width: '100%', @@ -105,7 +106,7 @@ const { setVideo } = (() => { download: true, screenShot: { saveImg: true, - quality: 0.92, + quality: 1, type: 'image/png', format: '.png' }, @@ -285,7 +286,7 @@ function ssaToVtt(ssaContent: string): string { const findVideo = (vFiles: VirtualFile[]) => vFiles.filter((v) => { - for (let s of ['mp4', 'm3u8', 'hls']) { + for (let s of ['mp4', 'mp3']) { if (v.name.endsWith(s)) { return true } diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.scss b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.scss new file mode 100644 index 0000000..8ec16d9 --- /dev/null +++ b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.scss @@ -0,0 +1,46 @@ +.lock-div { + position: absolute; + z-index: 20; + left: 15px; + top: 50%; + transform: translateY(-50%); + width: 30px; + aspect-ratio: 1; + cursor: pointer; + color: #f2f2f2; + opacity: 1; + visibility: visible; + transition: opacity 0.5s ease, visibility 0.5s ease, width 0.25s ease, left 0.25s ease; + svg { + width: inherit; + height: inherit; + } + &:hover { + width: 36px; + left: 12px; + } +} + +.xgplayer.xgplayer-inactive .lock-div { + pointer-events: none; + cursor: default; + visibility: hidden; + opacity: 0; +} + +.overlay-div { + position: absolute; + z-index: 10; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + display: none; + cursor: auto; +} + +.xgplayer.xgplayer-inactive .overlay-div { + pointer-events: none; + cursor: none; +} \ No newline at end of file diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts new file mode 100644 index 0000000..49f1592 --- /dev/null +++ b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts @@ -0,0 +1,119 @@ +import { BasePlugin } from 'xgplayer' +import './lockScreen.scss' + +interface LockPluginConfig { + lockText: string + unlockText: string +} + +export default class LockPlugin extends BasePlugin { + static get pluginName() { + return 'lockPlugin' + } + + static get defaultConfig(): LockPluginConfig { + return { + lockText: '锁定', + unlockText: '解锁' + } + } + + private locked: boolean + private lockDiv: HTMLDivElement | null = null + private overlayDiv: HTMLDivElement | null = null + + private lockOpenSVG: string = ` + + + + ` + + private lockClosedSVG: string = ` + + + + ` + + constructor(args: any) { + super(args) + this.locked = false + } + + afterCreate() { + this.createLockDiv() + this.createOverlayDiv() + this.bindEvents() + } + + private createLockDiv() { + this.lockDiv = document.createElement('div') + this.lockDiv.innerHTML = this.lockClosedSVG + this.lockDiv.className = 'lock-div' + this.player.root !== null && this.player.root.appendChild(this.lockDiv) + } + + private createOverlayDiv() { + this.overlayDiv = document.createElement('div') + this.overlayDiv.className = 'overlay-div' + this.player.root !== null && + this.player.root.appendChild(this.overlayDiv) + } + + private bindEvents() { + this.lockDiv!.addEventListener('click', this.toggleLock.bind(this)) + this.player.root !== null && + this.player.root.addEventListener( + 'click', + this.preventClick.bind(this), + true + ) + } + + private toggleLock() { + if (this.lockDiv && this.overlayDiv) { + this.locked = !this.locked + this.lockDiv.innerHTML = this.locked + ? this.lockOpenSVG + : this.lockClosedSVG + this.overlayDiv.style.display = this.locked ? 'block' : 'none' + this.player.controls && + (this.locked + ? this.player.controls.hide() + : this.player.controls.show()) + this.player.root !== null && + this.player.root.classList.toggle('locked', this.locked) + } + } + + private preventClick(event: MouseEvent) { + if ( + this.locked && + event.target instanceof HTMLElement && + !event.target.classList.contains('lock-div') + ) { + event.stopPropagation() + event.preventDefault() + } + } + + destroy() { + if (this.lockDiv) { + this.lockDiv.removeEventListener( + 'click', + this.toggleLock.bind(this) + ) + this.player.root !== null && + this.player.root.removeEventListener( + 'click', + this.preventClick.bind(this), + true + ) + this.player.root !== null && + this.player.root.removeChild(this.lockDiv) + } + if (this.overlayDiv) { + this.player.root !== null && + this.player.root.removeChild(this.overlayDiv) + } + } +}