Options

Player constructor options.

import Player from 'nplayer'

new Player({

// here

})

Description

Option	Description
container	The player mounts the container element. Like mount method parameter, if mount is not imported, this parameter will be used. When the parameter is a string, the corresponding element will be found automatically.
src	Video address, like video element src attribute.
video	Provide own video element.
videoProps	Properties of video element.
videoSources	Video source element array, see Getting Started
live	Whether is live mode
autoSeekTime	When the video is loaded successfully, jump to the point of time (this parameter will be set to 0 automatically). You can use this to allow memory to see the last time.
thumbnail	Please see Preview thumbnails
controls	Please see Control Bar
bpControls	Set the layout of different breakpoint, see Control Bar
settings	Please see Setting Menu
contextMenus	Please see Context menu
contextMenuToggle	toggle context menu (browser default menu & nplayer context menu).
plugins	List of plugins, see Plugins
i18n	Current player language, e.g. en,zh, etc
shortcut	Enable shortcuts
seekStep	One-time fast and forward step long and will be used in shortcuts
volumeStep	Increases and decreases the volume step by step and will be used in a shortcut
themeColor	Theme color, please see Custom Theme
posterBgColor	Poster background color, please see Custom Theme
progressBg	Progress bar background. See Custom Theme
progressDot	Points on progress bars, see Custom Theme
volumeProgressBg	Volume bars background, please view Custom Theme
volumeBarWidth	Volume width, see Custom Theme
loadingEl	Custom video loading element, see Custom Theme
openEdgeInIE	Whether to automatically open Edge in Win10 IE, see IE 11 compatibility
poster	Poster photo address, see Poster
posterEnable	Enable Poster
posterPlayEl	Custom poster playback button, see Custom Theme

Default parameters

{

shortcut: true,

seekStep: 10,

volumeStep: 0.1,

volumeBarWidth: 100,

settings: ['speed'],

contextMenus: ['loop', 'pip', 'version'],

contextMenuToggle: true,

openEdgeInIE: true,

posterEnable: true,

videoProps: {

crossorigin: 'anonymous',

preload: 'auto',

playsinline: 'true',

},

controls: [

['play', 'volume', 'time', 'spacer', 'airplay', 'settings', 'web-fullscreen', 'fullscreen'],

['progress'],

],

bpControls: {

650: [

['play', 'progress', 'time', 'web-fullscreen', 'fullscreen'],

[],

['spacer', 'airplay', 'settings'],

],

}

}

caution

Note that the control bar parameters will vary according to other parameters.If isTouch is true, it will not include volume, if live parameter is true, it will not include progress control items.

Options Signature

interface PlayerOptions {

container?: HTMLElement | string;

video?: HTMLVideoElement;

src?: string;

videoProps?: Record<string, any>;

videoSources?: VideoSource[];

live?: boolean;

autoSeekTime?: number;

thumbnail?: ThumbnailOptions;

controls?: (ControlItem | string)[][];

bpControls?: { [key: string]: (ControlItem | string)[][] }

settings?: (SettingItem | string)[];

contextMenus?: (ContextMenuItem | string)[];

contextMenuToggle?: boolean;

plugins?: Plugin[];

i18n?: string;

shortcut?: boolean;

seekStep?: number;

volumeStep?: number;

themeColor?: string;

posterBgColor?: string;

progressBg?: string;

progressDot?: HTMLElement;

volumeProgressBg?: string;

volumeBarWidth?: number | string;

loadingEl?: HTMLElement;

openEdgeInIE?: boolean;

poster?: string;

posterEnable?: boolean;

posterPlayEl?: HTMLElement;

isTouch?: boolean;

[key: string]: any;

}

interface VideoSource {

media?: string;

sizes?: string;

src?: string;

srcset?: string;

type?: string;

}

interface ThumbnailOptions {

startSecond?: number;

gapSecond?: number;

row?: number;

col?: number;

width?: number;

height?: number;

images?: string[];

}

interface ControlItem {

el: HTMLElement;

id?: any;

tip?: string;

tooltip?: Tooltip;

mounted?: boolean;

init?: (player: Player, position: number, tooltip: Tooltip) => void;

update?: (position: number) => void;

hide?: () => void;

isSupport?: (player: Player) => boolean;

dispose?: () => void;

[key: string]: any;

}

interface SettingItem<T = any> {

id?: string;

html?: string;

type?: 'switch' | 'select';

checked?: boolean;

options?: SettingItemOption<T>[];

value?: T;

init?: (player: Player, item: SettingItem) => void;

change?: (value: T, player: Player, item: SettingItem) => void;

_switch?: Switch;

_selectedEl?: HTMLElement;

_optionEls?: HTMLElement[];

_optionEl?: HTMLElement;

[key: string]: any;

}

interface ContextMenuItem {

id?: string;

html?: string;

disabled?: boolean;

invisible?: boolean;

checked?: boolean;

init?: (player: Player, item: ContextMenuItem) => void;

show?: (player: Player, item: ContextMenuItem) => void;

click?: (player: Player, item: ContextMenuItem) => void;

}

interface Plugin {

apply: (player: Player) => void;

dispose?: () => void;

}