diff --git a/src/css/info-panel.scss b/src/css/info-panel.scss index adc951f49..222843d08 100644 --- a/src/css/info-panel.scss +++ b/src/css/info-panel.scss @@ -2,7 +2,7 @@ position: absolute; top: 10px; left: 10px; - width: 400px; + width: 450px; background: rgba(28, 28, 28, 0.8); padding: 10px; color: #fff; @@ -32,12 +32,12 @@ } .dplayer-info-panel-item-title { - width: 107px; + width: 100px; text-align: right; margin-right: 10px; } .dplayer-info-panel-item-data { - width: 260px; + width: 320px; } } diff --git a/src/template/player.art b/src/template/player.art index 07b43f253..b98055346 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -275,43 +275,49 @@
[x]
- Player version + Player Version
-
- Player FPS +
+ Mime Type + +
+
+ Video FPS + +
+
+ Page FPS + +
+
+ Dropped Frames
- Video type + Video Type
- Video url + Video URL
- Video resolution + Video Resolution
- Video duration - -
- {{ if options.danmaku }} -
- Danmaku id + Video Duration
-
- Danmaku api +
+ Buffer Remain
-
- Danmaku amount +
+ Downlaod Speed
- {{ /if }}
{{ each options.contextmenu }} diff --git a/src/ts/info-panel.ts b/src/ts/info-panel.ts index c89393b3c..1d5e2d560 100644 --- a/src/ts/info-panel.ts +++ b/src/ts/info-panel.ts @@ -1,6 +1,8 @@ /* global DPLAYER_VERSION GIT_HASH */ import DPlayer from './player'; import Template from './template'; +import Mpegts from 'mpegts.js'; +import FlvJs from 'flv.js'; class InfoPanel { player: DPlayer; @@ -49,15 +51,43 @@ class InfoPanel { this.template.infoUrl.textContent = this.player.options.video.url ?? 'N/A'; this.template.infoResolution.textContent = `${this.player.video.videoWidth} x ${this.player.video.videoHeight}`; this.template.infoDuration.textContent = `${this.player.video.duration}`; - if (this.player.options.danmaku && this.player.danmaku !== null) { - this.template.infoDanmakuId.textContent = this.player.options.danmaku.id ?? 'N/A'; - this.template.infoDanmakuApi.textContent = this.player.options.danmaku.api ?? 'N/A'; - this.template.infoDanmakuAmount.textContent = `${this.player.danmaku.dan.length}`; + + // Dropped Frames + if (this.player.video['getVideoPlaybackQuality'] != undefined) { + const quality = this.player.video.getVideoPlaybackQuality(); + this.template.infoDroppedFrames.textContent = `${quality.droppedVideoFrames} / ${quality.totalVideoFrames}`; + } else if ((this.player.video as any)['webkitDecodedFrameCount'] != undefined) { + const decoded: number = (this.player.video as any)['webkitDecodedFrameCount']; + const dropped: number = (this.player.video as any)['webkitDroppedFrameCount']; + this.template.infoDroppedFrames.textContent = `${dropped} / ${decoded}`; + } else { + this.template.infoDroppedFrames.textContent = `N/A`; + } + + // Buffer Remain + if (this.player.video.buffered.length > 0) { + const bufferRemain = this.player.video.buffered.end(0) - this.player.video.currentTime; + this.template.infoBufferRemain.textContent = `${bufferRemain.toFixed(3)} s`; + } else { + this.template.infoBufferRemain.textContent = 'N/A'; + } + + // flv.js / mpegts.js related metrics + if (this.player.type === 'mpegts' || this.player.type === 'flv') { + const player: Mpegts.Player | Mpegts.MSEPlayer | Mpegts.NativePlayer | FlvJs.Player | undefined = + this.player.plugins.mpegts || this.player.plugins.flvjs; + if (player) { + const mediaInfo = player.mediaInfo as Mpegts.MSEPlayerMediaInfo; + const statisticsInfo = player.statisticsInfo as Mpegts.MSEPlayerStatisticsInfo; + this.template.infoMimeType.textContent = mediaInfo.mimeType ?? 'N/A'; + this.template.infoVideoFPS.textContent = `${mediaInfo.fps?.toFixed(3) ?? 'N/A'}`; + this.template.infoDownloadSpeed.textContent = statisticsInfo.speed?.toFixed(3).toString() + ' KB/s' ?? 'N/A'; + } } } fps(value: number): void { - this.template.infoFPS.textContent = `${value.toFixed(1)}`; + this.template.infoPageFPS.textContent = `${value.toFixed(1)}`; } } diff --git a/src/ts/template.ts b/src/ts/template.ts index 223fe78e8..3dc3e257e 100644 --- a/src/ts/template.ts +++ b/src/ts/template.ts @@ -84,15 +84,17 @@ class Template { notice!: HTMLElement; infoPanel!: HTMLElement; infoPanelClose!: HTMLElement; + infoMimeType!: HTMLElement; infoVersion!: HTMLElement; - infoFPS!: HTMLElement; + infoVideoFPS!: HTMLElement; + infoPageFPS!: HTMLElement; + infoDroppedFrames!: HTMLElement; infoType!: HTMLElement; infoUrl!: HTMLElement; infoResolution!: HTMLElement; infoDuration!: HTMLElement; - infoDanmakuId!: HTMLElement; - infoDanmakuApi!: HTMLElement; - infoDanmakuAmount!: HTMLElement; + infoBufferRemain!: HTMLElement; + infoDownloadSpeed!: HTMLElement; constructor(options: { container: HTMLElement; options: DPlayerType.OptionsInternal; index: number; tran: (text: string) => string; }) { this.container = options.container; @@ -196,15 +198,17 @@ class Template { this.notice = this.container.querySelector('.dplayer-notice')!; this.infoPanel = this.container.querySelector('.dplayer-info-panel')!; this.infoPanelClose = this.container.querySelector('.dplayer-info-panel-close')!; + this.infoMimeType = this.container.querySelector('.dplayer-info-panel-item-mimetype .dplayer-info-panel-item-data')!; this.infoVersion = this.container.querySelector('.dplayer-info-panel-item-version .dplayer-info-panel-item-data')!; - this.infoFPS = this.container.querySelector('.dplayer-info-panel-item-fps .dplayer-info-panel-item-data')!; + this.infoVideoFPS = this.container.querySelector('.dplayer-info-panel-item-video-fps .dplayer-info-panel-item-data')!; + this.infoPageFPS = this.container.querySelector('.dplayer-info-panel-item-page-fps .dplayer-info-panel-item-data')!; + this.infoDroppedFrames = this.container.querySelector('.dplayer-info-panel-item-dropped-frames .dplayer-info-panel-item-data')!; this.infoType = this.container.querySelector('.dplayer-info-panel-item-type .dplayer-info-panel-item-data')!; this.infoUrl = this.container.querySelector('.dplayer-info-panel-item-url .dplayer-info-panel-item-data')!; this.infoResolution = this.container.querySelector('.dplayer-info-panel-item-resolution .dplayer-info-panel-item-data')!; this.infoDuration = this.container.querySelector('.dplayer-info-panel-item-duration .dplayer-info-panel-item-data')!; - this.infoDanmakuId = this.container.querySelector('.dplayer-info-panel-item-danmaku-id .dplayer-info-panel-item-data')!; - this.infoDanmakuApi = this.container.querySelector('.dplayer-info-panel-item-danmaku-api .dplayer-info-panel-item-data')!; - this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data')!; + this.infoBufferRemain = this.container.querySelector('.dplayer-info-panel-item-buffer-remain .dplayer-info-panel-item-data')!; + this.infoDownloadSpeed = this.container.querySelector('.dplayer-info-panel-item-download-speed .dplayer-info-panel-item-data')!; } }