信息面板插件

用于显示播放中的各种播放信息

引入

import { H5Player } from '@tencent/thumbplayer-h5';
import { InfoPanelPlugin } from '@tencent/thumbplayer-plugin-info-panel';

const player = new H5Player({
container: '.container',
plugins: [
  [
    InfoPanelPlugin.pluginName,
    {
      // 是否显示内置信息，若为true，播放器自动显示一些播放信息并实时更新。
      defaultInfo: true,
    },
  ],
],
});
const infoPanel = player.plugins[InfoPanelPlugin.pluginName];

// 展示信息面板
infoPanel.show();

// 如果有需要，也可以手动修改某一显示项的值
infoPanel.getItemDom('vid').value.innerText = '456';

配置

new H5Player({ 
  container: '#demo', 
  plugins: [
    [ErrorPagePlugin.pluginName, {
      infoPanelConfig: {
        defaultInfo: true,
        disableDefaultKey: [''],
      },
    }],
  ],
});

插件API

destroy

▸ destroy(): void

Returns: void

---

getItemDom

▸ getItemDom(key: string): object

获取面板上的DOM元素

Parameters:

Name	Type
key	string

Returns: object

Name	Type
el	HTMLElement
value	HTMLElement

---

hide

▸ hide(): void

隐藏信息面板

Returns: void

---

show

▸ show(): void

显示信息面板

Returns: void

---

start

▸ start(list?: infoItemType[]): void

设置面板内容

Parameters:

Name	Type
list	infoItemType[]

Returns: void

---

trigger

▸ trigger(): void

Returns: void

信息面板中各项参数的含义

1. 视频ID：视频的vid/流id（如果有）等信息。
2. 视频CDN：视频资源文件的域名。
3. 播放流水：当前播放的流水号，用于查询日志。
4. GUID：当前设备的标识ID。
5. 播放内核：播放文件的格式，所使用的内核，和内核版本号。
6. 编码：（仅部分内核支持）视频文件所使用的音视频编码。
7. 显示器信息：第一个为播放器所在容器的大小，第二个为所在显示器的分辨率，(ext标识当前浏览器是否为外接屏幕，仅部分浏览器支持)。
8. 视频分辨率：视频文件的原始分辨率。
9. 帧数：丢帧及解码总帧数信息。
10. 缓冲健康度：当前播放时间点的前向缓冲区大小。
11. 网络活动：（仅部分场景支持）视频资源的下载速度。
12. Mystery：调试信息。
    1. br：缓冲区
    2. t：当前播放时间
    3. pg：是否启用渐进式加载
    4. s：状态流转
    5. b：缓冲次数
    6. r：重试次数
    7. lc：（仅直播）延迟
    8. a：自动播放被阻止的原因
    9. enc: 加密类型