Skip to main content

Plugins

NPlayer can expand its functionality with plugins. It is also very easy to write a plugin.

The plugin for NPlayer is an object, its interface is defined below.

interface Plugin {
apply: (player: Player) => void;
dispose?: () => void;
}

插件其实就是一个接收 player 对象的一个函数。其中 dispose 可选的卸载方法,当播放器卸载时会调用该方法。初始化插件时播放器会调用 apply 方法并传入 player 对象作为参数。

Example#

我们可以实现一个 log 插在,在 player 触发事件时打印日志。

new Player({
plugins: [
{
apply(player) {
player.on('Mounted', () => console.log('mounted'))
player.on('Play', () => console.log('play'))
// ...
}
}
]
})

Player 接收一个 plugins 参数。

注册右键菜单、控制、设置项#

你可以使用 player 上的这三个方法注册这些项。

  • registerSettingItem(item: SettingItem, id?: string): void 注册设置项
  • registerContextMenuItem(item: ContextMenuItem, id?: string): void 注册右键菜单项
  • registerControlItem(item: ControlItem, id?: string): void 注册控制项

注册过后,用户就可以使用字符串配置播放器,而不是具体对象。

const myPlugin = {
apply(player) {
player.registerControlItem({ id: 'my-control', el: document.createElement('input') })
}
}
new Player({
plugins: [myPlugin],
controls: ['play', 'spacer', 'my-control']
})

我们通过 registerControlItem 注册一个控制项,然后在播放器的 controls 参数中就可以直接使用 my-control 字符串啦。

右键菜单和设置项都是相同的使用方法。

control and contextmenu#

在执行插件 apply 的时候,player 对象的 controlcontextmenu 还没初始化,都是 undefined。(player 上的其他对象都已初始化完成)

{
apply(player) {
console.log(player.control) // undefined
console.log(player.contextmenu) // undefined
player.on('AfterInit', () => {
console.log(player.control) // 有值
console.log(player.contextmenu) // 有值
})
}
}

所以在插件中,可以修改 player.optscontrolssettingscontextMenus 的值,从而影响最终的渲染结果。

{
apply(player) {
player.opts.controls = player.opts.controls.filter(c => c.id !== 'volume')
}
}

上面代码将去除音量控制。

Plugin parameters#

插件可以是类或函数的方式,这方便接收插件参数。

function createMyPlugin(opts) {
return {
apply(player) {
console.log(opts)
}
}
}
class MyPlugin {
constructor(opts) {
this.opts = opts
}
apply(player) {
console.log(this.opts)
}
}
new Player({
plugins: [createMyPlugin({ /* options */ }), new MyPlugin({ /* options */ })]
})

Built-in Component#

开发插件的时候还可以使用 NPlayer 的内置组件来加速开发。

{
apply(player) {
const { components } = player.Player
}
}

详情请查看内置组件

Theme#

如果插件包含 UI 的话,可以使用 CSS 变量来统一主题。

.nplayer_my_plugin {
color: var(--theme-color);
}

插件的 CSS 应该使用 .nplayer_ 作为开头,统一命名,更多 CSS 变量请查看定制主题

Danmaku Plugin#

NPlayer 的弹幕功能就是由插件形式编写。如果你想给播放器添加弹幕功能,可以直接引入 NPlayer 的弹幕插件。

import Player from 'nplayer'
import Danmaku from '@nplayer/danmaku'
new Player(plugins: [new Danmaku()])

更多请查看弹幕插件