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); },

})