NPlayer 所有的图标、按钮都可以替换。
内置图标#修改内置图标可以通过 NPlayer 的 Icon 对象修改。
import Player, { Icon } from 'nplayer'
console.log(Player.Icon === Icon)// true
Icon.register('play', (cls) => { const i = document.createElement('i') i.classList.add('icon_play') if (cls) i.classList.add(cls) return i;})
console.log(Icon.play('cls_name'))//
const player = new Player()player.mount(document.body)CopyIcon 对象提供一个 register 方法,它接收两个参数,图标名和一个接收类名参数并返回 DOM 元素的函数,它可以用来添加或替换已有的图标。
当注册成功后就可以通过,Icon['图标名'] 访问这个函数了。
目前 NPlayer 一共内置有如下 icon。
icon 名描述play播放pause暂停volume音量muted静音cog设置webEnterFullscreenweb 全屏webExitFullscreenweb 退出全屏enterFullscreen全屏exitFullscreen退出全屏airplay隔空播放你可以通过覆盖上面图标名,从而修改播放器对应图标。
caution需要在构造 player 对象之前替换 icon,否则 player 对象构造出来后还是使用的老 icon。
主题色#可以使用构造参数和 CSS 变量修改颜色。
下面是构造函数参数。
参数名描述themeColor主题色progressBg播放进度条背景volumeProgressBg音量条背景posterBgColor海报背景色,默认是透明色与之对应的 CSS 变量如下:
--theme-color: #007aff;--poster-bg-color: transparent;--progress-bg: #007aff;--volume-progress-bg: #007aff;Copy进度条锚点#通过 progressDot 参数修改播放器进度条上的拖动点,它是一个 DOM 元素。
new Player({ progressDot: document.createElement('div') })Copyloading#可以通过 loadingEl 参数修改播放器加载中的元素,它是一个 DOM 元素。
const loading = new Image()loading.src = 'loading.gif'
new Player({ loadingEl: loading })Copy海报播放按钮#可以通过 posterPlayEl 参数修改播放器海报真中间的播放按钮,它是一个 DOM 元素。
音量进度条宽度#音量按钮的宽度可以通过 volumeBarLength 修改,它是一个 number 或 string 类型。默认是 100px。
垂直音量进度条#如果将 volumeVertical 设置为 true,音量控制条将是垂直的,而不是横向的。
例子#自定义 Bilibili 主题