539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

feat: 视频插件移动端优化

Browse Source
This commit is contained in:
539943419 committed 2024-09-29 20:27:42 +08:00
1 parent cba20150be
commit 65c17a8ce3
2 files changed
+86 -93
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
+7 -4
View File
@@ -52,19 +52,22 @@ const { setVideo } = (() => {
videoFillMode: 'contain',
autoplay: true,
download: true,
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[],
lang: 'zh-cn',
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
texttrack,
screenShot: {
saveImg: true,
quality: 1,
type: 'image/png',
format: '.png'
},
lang: 'zh-cn',
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
playNext: {
urlList: videos.map(v => v.url)
},
texttrack,
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[]
progress: {
isDragingSeek: true
}
})
}
return {
src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
+79 -89
View File
@@ -1,109 +1,99 @@
import { BasePlugin } from 'xgplayer'
import './lockScreen.scss'
import { BasePlugin } from "xgplayer";
import "./lockScreen.scss";
import MobilePlugin from "xgplayer/es/plugins/mobile";
export default class LockPlugin extends BasePlugin {
static get pluginName() {
return 'lockPlugin'
}
static get pluginName() {
return "lockPlugin";
}
private locked: boolean
private lockDiv: HTMLDivElement | null = null
private overlayDiv: HTMLDivElement | null = null
private locked: boolean;
private lockDiv: HTMLDivElement | null = null;
private overlayDiv: HTMLDivElement | null = null;
private lockOpenSVG: string = `
private lockOpenSVG: string = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M336 208v-95a80 80 0 0 0-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
</svg>`
</svg>`;
private lockClosedSVG: string = `
private lockClosedSVG: string = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M336 112a80 80 0 0 0-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
</svg>`
</svg>`;
constructor(args: any) {
super(args)
this.locked = false
}
constructor(args: any) {
super(args);
this.locked = false;
}
afterCreate() {
this.createLockDiv()
this.createOverlayDiv()
this.bindEvents()
}
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 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 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() {
console.log(this.player.seek)
this.player.seek = () => {}
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('xgplayer-locked', this.locked)
private bindEvents() {
this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
this.player.usePluginHooks("progress", "dragstart", () => {
if (this.locked) {
return false;
}
return true;
});
// 阻止进度条默认行为
for(const event of ['dragstart', 'drag', 'dragend']) {
this.player.usePluginHooks("progress", event, () => {
if (this.locked) {
return false;
}
return true;
});
}
}
}
private preventClick(event: MouseEvent) {
if (
this.locked &&
event.target instanceof HTMLElement &&
!event.target.classList.contains('lock-div')
) {
event.stopPropagation()
event.preventDefault()
}
}
private toggleLock() {
const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
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("xgplayer-locked", this.locked);
this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
}
}
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)
}
}
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);
}
}
}