ThumbplayerH5文档

# 控制栏插件

控制栏插件适配了h5/pc/直播/点播。

直播和点播对应不同的默认控制栏子组件，根据创建播放器时传入的type参数决定，vod为点播，live为直播。

h5和pc对应不同的样式，默认从ua判断，也可以使用ctrlConfig.isMobile指定。

另外，这是一个UI插件，控制栏样式会以style标签插入document.head。

# 引入

npm install @tencent/thumbplayer-plugin-ctrlbar

import { H5Player } from '@tencent/thumbplayer-h5';
import { CtrlbarPlugin } from '@tencent/thumbplayer-plugin-ctrlbar';

const player = new H5Player({ container: '#demo', plugins: [CtrlbarPlugin.pluginName] });
const ctrlbar = player.plugins[CtrlbarPlugin.pluginName];

# 配置

引入后可以通过player初始化选项ctrlConfig 或者 插件初始化选项传入控制栏初始化参数

import { H5Player } from '@tencent/thumbplayer-h5';
import { CtrlbarPlugin } from '@tencent/thumbplayer-plugin-ctrlbar';

new H5Player({ 
  container: '#demo', 
  plugins: [CtrlbarPlugin.pluginName],
  ctrlConfig: {},
});
// or
new H5Player({ 
  container: '#demo', 
  plugins: [
    [CtrlbarPlugin.pluginName, { }],
  ],
});

# ctrlConfig属性

# comps

• comps: (PlayBtn | Nextbtn | TimeArea | Progress | Fullscreen | FakeFullscreen | Volume)[]

自定义控制栏组件

# disableAudioTrack

• disableAudioTrack: boolean

禁用多音轨

# disableFakeFullscreen

• disableFakeFullscreen: boolean

禁用伪全屏

# disableHotKey

• disableHotKey: boolean

禁用键盘控制

# disableLang

• disableLang: boolean

禁用语言切换

# disableNextBtn

• disableNextBtn: boolean

禁用下一个按钮

# hideHoverTime

• hideHoverTime: boolean

进度条hover不展示时间

# isMobile

• isMobile: boolean

是否使用移动端UI，默认会从ua判断

# pauseOnLive

• pauseOnLive: boolean

直播时保留暂停功能，内部不再调用play方法

# disableCacheVolume

• disableCacheVolume: boolean

是否禁用音量缓存

# disableCachePlayrate

• disableCachePlayrate: boolean

禁用倍速缓存

# enablePlayrate

• enablePlayrate: boolean

移动端是否展示倍速按钮，默认隐藏

# enableLoop

• enableLoop: boolean

是否展示循环播放按钮，默认隐藏

# useH5FakeFullscreen

• useH5FakeFullscreen: boolean

是否在移动端使用伪全屏

# uiDuration

• uiDuration: number

视频外显时长，优先于实际video播放时长

# hidePopupOnClick

• hidePopupOnClick: boolean

点击浮层后是否隐藏浮层

# disableTestEvent

• disableTestEvent: boolean

禁用移动端的彩蛋事件

# hotPointData

• hotPointData: IHotPoint[]

热点数据信息

# hotPointTipType

• hotPointTipType: HOTPOINT_TIP_TYPE

标记打点提示信息样式

# hotPointCustomTipEl

• hotPointCustomTipEl: HTMLElement

自定义热点信息元素

# showNextBtnUIOnly

• showNextBtnUIOnly: boolean

只展示下一集按钮的UI,按钮内部不监听播放事件

# 事件

控制栏上的点击操作等DOM事件通过CTRL_EVENTS在ctrlbar实例上广播

import { CTRL_EVENTS } from '@tencent/thumbplayer-plugin-ctrlbar';

ctrlbar.on(CTRL_EVENTS.FULLSCREEN_CHANGE, console.log);

# CTRL_EVENTS属性枚举

export const events = {
  /** 全屏状态变化 */
  FULLSCREEN_CHANGE: 'windowFullscreenChange',
  /** 进入/退出全屏错误 */
  FULLSCREEN_ERROR: 'fullscreenError',
  /** 伪全屏全屏状态变化 */
  FAKE_FULLSCREEN_CHANGE: 'browserFullscreenChange',

  /** 点击下一集按钮 */
  CLICK_NEXTBTN: 'ctrl:click-nextbtn',
  /** 点击播放按钮 */
  CLICK_PLAYBTN: 'ctrl:click-playbtn',
  /** 点击重播 */
  CLICK_REPLAY: 'ctrl:click-replay',
  /** 点击多语言 */
  SET_LANGUAGE: 'ctrl:set-language',
  /** 点击清晰度 */
  SET_LEVEL: 'ctrl:set-level',
  /** 点击多音轨 */
  SET_AUDIO: 'ctrl:set-audio',
  /** 点击倍速 */
  SET_PLAYRATE: 'ctrl:set-playrate',

  /** 移动端浮层切换显隐 */
  TOGGLE_OVERLAY: 'ctrl:toggle-overlay',
  /** 进度条mousedown */
  MOUSE_DONW: 'ctrl:progress-mousedown',
  /** 进度条mousemove */
  MOUSE_MOVE: 'ctrl:progress-mousemove',
  /** 进度条mouseup */
  MOUSE_UP: 'ctrl:progress-mouseup',
  /** 进度条展示 */
  SHOW: 'ctrl:show',
  /** 进度条隐藏 */
  HIDE: 'ctrl:hide',
  /** 达到ctrlbar.duration设置的预览时长，视频被停止 */
  STOP_PREVIEW: 'ctrl:stop-preview',
  
  /** 进度条热点相关的事件 */
  HOT_MOUSE_OVER: 'ctrl:hotpoint-mouseover',
  HOT_MOUSE_MOVE: 'ctrl:hotpoint-mousemove',
  HOT_MOUSE_OUT: 'ctrl:hotpoint-mouseout',
};

# 插件API

# destroy

▸ destroy(): void

Returns: void

# removeComp

▸ removeComp(comp: typeof FakeFullscreen | typeof Fullscreen | typeof NextBtn | typeof PlayBtn | typeof Progress | typeof TimeArea | typeof Volume): void

删除控制栏上的组件dom

# Parameters:

Name Type
comp typeof FakeFullscreen | typeof Fullscreen | typeof NextBtn | typeof PlayBtn | typeof Progress | typeof TimeArea | typeof Volume

Returns: void

# removePopup

▸ removePopup(popup: VALID_POPUP): void

删除控制栏浮层和按钮dom

# Parameters:

Name Type
popup VALID_POPUP

Returns: void

# setCompDisable

▸ setCompDisable(name: CompNames, disable?: boolean): void

设置控制栏组件启用/禁用 txp_disbaled

# Parameters:

Name Type Default value
name CompNames -
disable boolean true

Returns: void

# setCompVisable

▸ setCompVisable(name: CompNames, visible?: boolean): void

设置控制栏组件展示/隐藏 txp_none

# Parameters:

Name Type Default value
name CompNames -
visible boolean true

Returns: void

# 补充

控制栏内部分为很多小的组件，在直播/点播场景会分别展示对应的默认组件，并且可以通过ctrlConfig.comps配置自定义组件；

控制栏提供了禁用/解禁组件的setCompDisable方法 和 显示/隐藏组件的 setCompVisable方法。

控制栏上默认不展示 清晰度/多语言/多音轨 按钮，需要设置对应的选项和值后才会展示，level/levelOpts lang/langOpts audio/audioOpts 分别对应 清晰度/多语言/多音轨

# 进度条标记打点组件

进度条标记打点组件实现了在进度条中根据传入信息显示热点信息和文案的功能，文案浮窗显示可与进度条预览图插件@tencent/thumbplayer-plugin-ui-preview (opens new window)进行联动，也可使用默认的浮窗显示或是传入自定义节点进行深度自定义。

# 事件

有关热点元素的事件通过ctrlbar广播，事件定义如下

/** 下发的事件 */
export enum HOTPOINT_EVENT {
  MOUSE_OVER = 'ctrl:hotpoint_mouseenter',
  MOUSE_OUT = 'ctrl:hotpoint-mouseleave',
  MOUSE_MOVE = 'ctrl:hotpoint-mousemove',
};

可以通过监听事件实现一部分自定义逻辑

# 接口

/** 热点数据信息 */
export interface IHotPoint {
  // 标记时间(s)
  timing: number;
  // 显示文案
  text?: string;
  el?: HTMLElement;
  [key: string]: any;
}

export declare class HotPoint extends Component {
  // 加载热点信息数据
  public setupHotPoints(points: Array<IHotPoint>): void;
  // 清除热点信息
  public clearHotPoints(): void;
  // 全部热点数据对应的dom元素
  public get hotPointEls(): HTMLElement;
  // 文案浮窗元素(仅default模式下生效)
  public get tipEl(): HTMLElement;
}

# 使用范例

const ctrlbar = player.plugins[CtrlbarPlugin.pluginName];
const hotpoint = ctrlbar.instances['HotPoint'];
const testPoints = [
  { timing: 100, text: '热点文本111' },
  { timing: 200, text: '热点文本111' },
  { timing: 220, text: '热点文本111' },
  { timing: 320, text: '热点文本222' },
  { timing: 500, text: '热点文本333' },
];
// 显示热点dom
hotpoint.setupHotPoints(testPoints);
// 清除热点dom
hotpoint.clearHotPoints();

# 自定义浮窗

与自定义浮窗相关的配置项在ctrlConfig中


/** 控制栏初始化参数，包含一系列disbaleXX/enableXX配置等 */
export interface ICtrlbarConfig {
    ctrlConfig?: Partial<{
      	......
      	/** 标记打点(进度条热点)相关 */
        /** 热点数据信息 */
        hotPointData: Array<IHotPoint>
        /**
         * 标记打点提示信息样式
         * default: 插件默认样式,当传入hotPointCustomTipEl时显示自定义元素
         * with-preview: 与进度条缩略插件联动
         * none: 不显示提示信息
         */
        hotPointTipType: 'default'|'with-preview'|'none';
        /** 自定义热点信息元素 */
        hotPointCustomTipEl: HTMLElement;
      	......
    }>;
}

调用范例：

// 联动进度条预览图插件
const ctrlConfig: IH5PlayerConfig['ctrlConfig'] = {
  hotPointTipType: 'with-preview',
  // 也可以在控制栏配置项内传入热点数据
  hotPointData: testPoints
};

player = createH5Player({
    container: '#demo',
    plugins: [
      CtrlbarPlugin.pluginName,
      UIPreviewListPlugin.pluginName,
      UIPreviewPlugin.pluginName,
    ],
    preview: previewData,
    ctrlConfig,
  });

// 使用自定义浮窗
const customtip = document.createElement('div');
customtip.classList.add('custom_tip');
const ctrlConfig: IH5PlayerConfig['ctrlConfig'] = {
  hotPointTipType: 'default',
  hotPointCustomTipEl: customtip,
  hotPointData: testPoints
};
上次更新: 9/13/2021, 4:35:37 PM

← 封面图 →