Responsive layout

NPlayer 支持移动、平板和桌面。还可以自定义任意多个的断点。NPlayer 中的交互和布局是分离的。

Touch Interaction#

一般我们在手机上看视频，单击视频会显示控制条，双击是播放暂停视频，左右滑动可以快进或快退视频。而在电脑上单击视频是播放暂停，双击是全屏，键盘上的左右快捷键可以快进快退视频。

NPlayer 支持这两套交互，可以通过 isTouch 参数来设置播放器是使用哪一套交互，默认情况下会自动检测是否是触屏。

import Player from 'nplayer'

const player = new Player({
  isTouch: true // 默认会自动检测
})

自定义断点布局#

通过 bpControls 参数可以自定义任意多个控制条布局，默认值如下。

import Player from 'nplayer'

const player = new Player({
  bpControls: { // 默认值
    650: [
      ['play', 'progress', 'time', 'web-fullscreen', 'fullscreen'],
      [],
      ['spacer', 'airplay', 'settings'],
    ]
  }
})

NPlayer control

这个默认参数的意思是，当播放器的尺寸小于等于 650px 使用这套控制条布局。（如果你不知道为什么是一个二维数组请查看控制条章节）

info

控制条参数中的 空字符串 等 falsy 值的项目会被过滤。如 [['', 'a', '', 'b'], [], undefined]，会被转换为 [['a', 'b'], []]

你可以自定义添加任意多个断点。

{
  bpControls: {
    100: [[], [], []], // <= 100px 使用这套
    200: [[], [], []], // <= 200px 使用这套
    300: [[], [], []], // <= 300px 使用这套
  },
  controls: [[],[],[]] // 其他情况下使用这个
}

如果没有匹配到 bpControls 中定义的布局，则会使用 controls 中的默认布局。

当每次布局变化时，播放器还会触发 BpChange 事件，你可以监听该事件做一些布局切换时的操作。

当然也可以通过调用 API 方法来自己手动更新布局，更多控制条布局请查看控制条。