Skip to main content

Built-in Component

NPlayer provides a number of built-in components that can facilitate secondary development and unified interaction.

You can access these components on the components properties or import them directly.

import Player, { Tooltip } from 'nplayer'
console.log(Tooltip === Player.components.Tooltip) // true

These components have the following similarities.

  • The first parameter of the constructor is the container element of the component
  • el properties, representing DOM element
  • disposal method, calling this method will destroy components

Tooltip#

API#

constructor(container: HTMLElement, html?: string)#

第一个是容器元素,第二个是可选的 html 提示文字。

html#

获取或设置 innerHtml

show(): void#

显示 Tooltip。

hide(): void#

隐藏 Tooltip。

setLeft(): void#

与容器左对齐。

setRight(): void#

与容器右对齐。

setBottom()#

向下弹出。

resetPos()#

重置弹出位置。

Example#

const tooltip = new Tooltip(document.body, 'tip~')
tooltip.html = 'change tip text'
tooltip.show() // show
tooltip.hide() // hide
console.log(tooltip.el)
tooltip.dispose() // destroy

Switch#

API#

constructor(container: HTMLElement, value?: boolean, change?: (v: boolean) => void)#

第二个参数表示当前是否是选中状态,第三个参数是 value 改变时的回调。

toggle(value?: boolean): void#

切换当前开关的值,如果传入 value 则表示强制设置成传入值的状态。

Example#

const switch = new Switch(document.body, false, (v) => {
if (v) console.log('checked')
})

Popover#

API#

constructor(container: HTMLElement, onHide?: (ev?: MouseEvent) => void, style?: Partial<CSSStyleDeclaration>, left?: boolean)#

  • onHide will be called when the popover is hidden
  • style popover style
  • left 是否和容器左对齐,默认是右对齐

panelEl: HTMLElement#

弹出框元素。

maskEl: HTMLElement#

遮罩元素。

applyPanelStyle(style: Partial<CSSStyleDeclaration>): void#

设置弹出框的样式。

show()#

显示弹出框。

hide()#

隐藏弹出框,你无需手动调用该函数,当用户点击弹出框外面时,会自动隐藏。

setBottom()#

弹出框将向下弹出。

resetPos()#

重置弹出框位置(向上弹出)。

Example#

const popover = new Popover(player.el)
const div = document.createElement('div')
div.textContent = 'on/off'
popover.panelEl.appendChild(div)
new Switch(popover.panelEl)

Slider#

API#

constructor(container: HTMLElement, opts: SliderOption)#

interface SliderOption {
value?: number;
stops?: { value: number, html?: string }[];
change?: (value: number) => void;
step?: boolean;
}
  • opts.value 当前的值,0 到 1 之间
  • opts.stops 滑块上的断点
  • opts.change 当用户修改滑块值是会调用
  • opts.step 滑动滑块时,是否自动吸附到最近的断点上

第三个参数是 player 播放器对象,如果传入该参数,当播放器尺寸变化是会自动更新滑块尺寸和位置,否则需要自己调用 slider.rect.update()

rect: Rect#

可以通过它获取滑块的 width, height, x, y,调用 update 方法,将更新滑块尺寸。

update(value: number, x?: number, trigger = true): void#

手动更新滑块的值,第二个参数是滑块 x 的值,没有可以不传,内部会自动计算。第三个参数是是否触发 change 回调。

Example#

new Slider(div, {
stops: [{ value: 0, html: '10%' }, { value: 1, html: '100%' }],
change(value) {
danmaku.updateOpacity(clamp(value + 0.1, 0.1, 1));
},
}, player)
// opacity

Checkbox#

API#

constructor(container: HTMLElement, opts: CheckboxOptions)#

interface CheckboxOptions {
html?: string;
checked?: boolean;
change?: (newValue: boolean) => void;
}
  • opts.html 复选框描述
  • opts.checked 当前是否选中
  • change 当值变动时的回调

update(v: boolean)#

Update currently checked or not.

Example#

new Checkbox(div, {
html: 'bottom to top', change(v) { danmaku.updateBottomUp(v); },
})