diff --git a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
index 061918d..5c69b5a 100644
--- a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
+++ b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
@@ -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 {
diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
index 8b9dd78..973568c 100644
--- a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
+++ b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
@@ -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 = `
`
+ `;
- private lockClosedSVG: string = `
+ private lockClosedSVG: string = `
`
+ `;
- 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);
+ }
+ }
}