Skip to main content

Attribute

The NPlayer attribute is divided into instance properties and static properties.

Instance Properties#

const player = new Player()
console.log(player)

You can access these properties by player instance objects.

container: HTMLElement#

Player container element (container parameter or mount() parameter).

el: HTMLElement#

Player DOM element.

opts: PlayerOptions#

Player parameters.

mounted: boolean#

Whether the player is mounted.

video: HTMLVideoElement#

Player video element.

rect: Rect#

Player size.

  • rect.width player width
  • rect.height player height
  • rect.x player x
  • rect.y player y
  • rect.update() update player size

一般情况不要调用 player.rect.update() 方法，而是触发 UpdateSize 事件， player.emit('UpdateSize') 。

loading: Loading#

Player loading object.

  • loading.el loading DOM elements
  • loading.isActive is currently visible
  • loading.show() show loading
  • loading.hide() hide loading

poster: Poster#

Player poster.

  • poster.el poster DOM element
  • poster.isActive is currently visible
  • poster.show() show poster
  • poster.hide() hide poster

toast: Toast#

Player toast.

  • show(html: string, position?: Position, timeout = 3000): ToastItem 显示一个提示，返回提示对象
type Position = 'center' | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'
interface ToastItem {
el: HTMLElement;
dispose: () => void;
}
  • close(toastItem?: ToastItem): void 手动关闭一个提示，或者全部提示

fullscreen: Fullscreen#

Player Fullscreen Object

  • isActive 当前是否是全屏状态
  • enableDblclick() 启用双击进入全屏
  • disableDblclick() 禁用双击进入全屏
  • enter() 进入全屏
  • exit() 退出全屏
  • toggle() 进入或退出全屏

webFullscreen: WebFullscreen#

播放器网页全屏对象。

  • isActive 当前是否是全屏状态
  • enter() 进入全屏
  • exit() 退出全屏
  • toggle() 进入或退出全屏

shortcut: Shortcut#

播放器快捷键对象。

  • register(keyCode: number, handler: (player: Player) => void) 注册自定义快捷键处理器
  • unregister(keyCode: number) 取消注册
  • enable() 启用快捷键
  • disable() 禁用快捷键

control: Control#

播放器进度条对象。

  • currentBp 当前断点值
  • isActive 当前是否显示控制条
  • show() 显示控制条
  • hide() 隐藏控制条
  • showTransient() 显示控制条，但是到一定时间会尝试自动隐藏
  • tryHide() 尝试隐藏控制条，比如当前视频暂停状态，调用该方法就不会隐藏
  • require() 添加一个控制条显示请求，tryHide 会判断是否有请求，如果则也不会隐藏
  • release() 释放一个请求，如果调用 require，没有调用该方法，则可能导致控制条不会自动隐藏。
  • updateItems() 更新控制条项，同 player.updateControlItems()

contextmenu: ContextMenu#

播放器右键菜单。

  • isActive 当前是否显示
  • hide() 隐藏右键菜单

touch: Touch#

触屏交互，如果 isTouch 参数是 true 时会启用。请查看播放器参数。

  • enable() 启用触屏交互
  • disable() 禁用触屏交互

currentTime: number [get/set]#

获取和设置当前视频时间。[get/set] 表示该属性可以同时被获取和设置新的值。

duration: number [get]#

获取当前视频长度。

buffered: TimeRanges [get]#

通 video 元素的 buffered。

volume: number [get/set]#

获取和设置视频音量，音量会被持久化。

muted: boolean [get/set]#

获取和设置视频是否静音。

playbackRate: number [get/set]#

获取和设置视频播放速率。

ended: boolean [get]#

当前视频是否播放结束。

paused: boolean [get]#

当前视频是否暂停。

playing: boolean [get]#

当前视频是否在播放中。

loop: boolean [get/set]#

获取和设置视频是否循环播放。

Player#

Player class.

EVENT#

Event object.For more information, see events

Static Properties#

import Player from 'nplayer'
console.log(Player)

EVENT#

Event object.For more information, see events

I18n#

Internationalize object.

  • t(key: string, lang?: string): string to return translation text
  • add(lang: string, transData: Record<string, string>) add translation
  • setCurrentLang(lang?: string) set current language
  • setDefaultLang(lang?: string) set default language
const key = 'Web fullscreen'
I18n.add('zh-cn', {
[key]: '网页全屏'
})
console.log(I18n.t(key))

如果当前是中文环境时会返回 网页全屏。The other language environment returns the key string directly.

Icon#

Icon object.For more information, see custom themes

components#

Built-in components.For more information see the built-in component.

Player#

Player class.

Edit this page