diff --git a/src/main/bilibili/player/index.ts b/src/main/bilibili/player/index.ts index d566de3..195d1d0 100644 --- a/src/main/bilibili/player/index.ts +++ b/src/main/bilibili/player/index.ts @@ -56,11 +56,13 @@ export class BilibiliPlayer extends Player { /** 每当元素添加到文档中时调用。 */ connectedCallback() { this.insertAdjacentElement('beforebegin', this.#part); + super.connectedCallback(); } /** 每当元素从文档中移除时调用。 */ disconnectedCallback() { this.#part.remove(); + super.disconnectedCallback(); } /** 每当元素被移动到新文档中时调用。 */ diff --git a/src/player/area/wrap/video/index.ts b/src/player/area/wrap/video/index.ts index 4ba0a0a..ba1d14d 100644 --- a/src/player/area/wrap/video/index.ts +++ b/src/player/area/wrap/video/index.ts @@ -167,6 +167,10 @@ class Video extends HTMLVideoElement { seek(t: number) { this.currentTime = t; } + + toggle() { + this.paused ? this.play() : this.pause(); + } } /** diff --git a/src/player/index.ts b/src/player/index.ts index a9a3bcf..23fd337 100644 --- a/src/player/index.ts +++ b/src/player/index.ts @@ -28,10 +28,14 @@ export class Player extends HTMLElement { // attributeChangedCallback(name: IobservedAttributes, oldValue: string, newValue: string) {} /** 每当元素添加到文档中时调用。 */ - // connectedCallback(){} + connectedCallback() { + self.addEventListener('keydown', this.onKeyDown); + } /** 每当元素从文档中移除时调用。 */ - // disconnectedCallback() {} + disconnectedCallback() { + self.removeEventListener('keydown', this.onKeyDown); + } /** 每当元素被移动到新文档中时调用。 */ // adoptedCallback() {} @@ -163,6 +167,7 @@ export class Player extends HTMLElement { } catch { } }); + ev.trigger(PLAYER_EVENT.INITED, void 0); } @@ -347,6 +352,54 @@ export class Player extends HTMLElement { } + protected onKeyDown = ({ key, code, shiftKey, ctrlKey, altKey, metaKey, isComposing }: KeyboardEvent) => { + try { + const { activeElement } = document; + if ( + activeElement?.hasAttribute('contenteditable') + || activeElement instanceof HTMLInputElement + || activeElement instanceof HTMLTextAreaElement + ) { } else { + switch (key) { + // 不能区分小键盘,但能识别 Shift 后的值 + case 'F': case 'f': { + // 全屏 + shiftKey || ctrlKey || altKey || metaKey || ev.trigger(PLAYER_EVENT.PLAYER_MODE, PLAYER_STATE.mode ^= PLAYER_MODE.FULL); + break; + } + case 'd': case 'D': { + // 弹幕开关 + shiftKey || ctrlKey || altKey || metaKey || (options.danmaku.visible = !options.danmaku.visible); + break; + } + case 'm': case 'M': { + // 音量开关 + shiftKey || ctrlKey || altKey || metaKey || (video.muted = !video.muted); + break; + } + case ' ': { + // 播放/暂停 + shiftKey || ctrlKey || altKey || metaKey || (PLAYER_STATE.mode & PLAYER_MODE.FULL && video.toggle()); + break; + } + case 'ArrowRight': { + // 快进 5 秒 + shiftKey || ctrlKey || altKey || metaKey || (video.currentTime += 5); + break; + } + case 'ArrowLeft': { + // 快退 5 秒 + shiftKey || ctrlKey || altKey || metaKey || (video.currentTime -= 5); + break; + } + } + // switch (code) { + // // 能区分小键盘,但不识别 Shift 后的值 + // } + } + } catch { } + } + /** 销毁当前播放器 */ protected playerDistroy() { this.flvPlayer?.destroy();