NPlayer - 兼容性超强的轻量开源H5弹幕播放器

NPlayer简介

NPlayer 是由 Typescript 加 Sass 编写，无任何第三方运行时依赖，兼容 IE11，支持移动端、支持 SSR、支持直播。高度可定制，所有图标、主题色等都可以替换，并且提供了内置组件方便二次开发。你可以自定义任意多个断点，不仅仅是兼容移动端，只要愿意，你可以非常轻松的兼容手机竖屏、手机横屏、平板等设备。它还拥有插件系统，弹幕功能就是使用插件形式提供，使用时按需引入即可。该播放器还可以接入任何流媒体，如 HLS、dash 和 flv 等。

优势:

• 轻量化

• 完全开源

• 兼容性超清

• 支持滑屏操作，包括触碰和滑动快进退等
  

NPlayer安装

<script src="/js/NPlayer.min.js"></script><div id="player"></div>

NPlayer初始化

const player = new NPlayer.Player({src: 'https://xmsdn.com/static/demo.M3U8',poster: 'https://xmsdn.com/static/demo.jpg',...});player.mount('#player');//绑定ID

NPlayer参数

播放器构造函数参数。

import Player from 'nplayer'const player = new Player({  // 这里})console.log(player.opts)

默认参数#

{  shortcut: true,  seekStep: 10,  volumeStep: 0.1,  volumeBarLength: 100,  settings: ['speed'],  contextMenus: ['loop', 'pip', 'version'],  contextMenuToggle: true,  openEdgeInIE: true,  posterEnable: true,  videoProps: {    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'],    ],  }}

NPlayer多层级

NPlayer 由 6 个不同功能的层级组成，每个层级有自己的 z-index。

z-index 高的组件会覆盖低的组件。当要实现自己组件时可以参考上表中的 z-index，将它放入合适层级。如，弹幕插件默认层级 z-index 是 5，那它将出现在 control 下方，video 元素上方。

流媒体支持

HLS

NPlayer 可以非常方便的接入流媒体协议，如果想使用 HLS 可以引入 hls.js。

import Hls from 'hls'import Player from 'player'const hls = new Hls()const player = new Player()hls.attachMedia(player.video)hls.on(Hls.Events.MEDIA_ATTACHED, function () {  hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.M3U8')})player.mount(document.body)

更多关于 hls.js 使用方法，请查看 hls.js 官方文档 。

hls 是视频点播很常用的协议，本教程还提供了使用 hls.js 实现清晰度切换功能，详情请查看 清晰度切换 。

DASH

和 HLS 非常相似的是 DASH 协议，要使用 DASH 协议可以使用 dash.js 。

import dash from 'dashjs'import Player from 'player'const player = new Player()dash  .MediaPlayer()  .create()  .initialize(    player.video,    'https://www:llbk.cn:8001/out.mpd',    true // 自动播放  )

更多关于 dash.js 请查看 dash.js 官方文档 。

任何流媒体

按照这个套路，其实任何这些流媒体都可以接入（flv, WebTorrent 等等）。因为它们只需要一个 video 元素就行，我们可以通过 player.video 属性访问到 video 元素。

除了让 NPlayer 自动创建 video 元素，还可以自己提供 video 元素

import Hls from 'hls'import Player from 'player'const video = document.createElement('video')const hls = new Hls()const player = new Player({ video })hls.attachMedia(player.video)hls.on(Hls.Events.MEDIA_ATTACHED, function () {  hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')})player.mount(document.body)

弹幕插件

该插件可以给 NPlayer 添加弹幕功能。它可以保持大量弹幕而不卡顿，并且支持非常多的设置，比如弹幕防碰撞、弹幕速度、字体、速度、透明度、显示区域等。

引入弹幕插件

<script src="/js/danmaku.min.js"></script>import Player from 'nplayer'import Danmaku from '@nplayer/danmaku'const danmakuOptions = {  items: [    { time: 1, text: '弹幕～' }  ]}const player = new Player({  plugins: [new Danmaku(danmakuOptions)]})player.mount(document.body)

控制条#

弹幕插件会注册 danmaku-send 和 danmaku-settings 这两项。

通过 autoInsert 参数可以控制是否自动插入，自动插入逻辑是，找到 spacer 项，将它替换成 danmaku-send 和 danmaku-settings，如果找不到 spacer 则不会自动插入。

new Player({  controls: [['play', 'spacer', 'danmaku-settings'], ['progress']],  plugins: [    new Danmaku({      autoInsert: false,    })  ]})

你可以将 autoInsert 设置为 false，然后手动设置控制条项，如上代码，手动加入了弹幕设置项，移除了弹幕发送项。

弹幕对象#

弹幕插件还会在 player 对象上注册一个 danmaku 对象。你可以通过 player.danmaku 访问该对象。

console.log(player.danmaku)

弹幕列表#

弹幕列表可以通过 items 参数传入，一个弹幕对象签名如下。

interface BulletOption {  color?: string; // 弹幕颜色  text: string; // 弹幕文字  time: number; // 弹幕出现时间  type?: 'top' | 'bottom' | 'scroll'; // 弹幕类型，默认为滚动类型  isMe?: boolean; // 是否是当前用户发送的  force?: boolean; // 是否强制展示该弹幕（弹幕较多，并且是防碰撞模式时，可能会丢弃一部分弹幕）}

弹幕列表必须按照 time 从小到大排序。如果获取的弹幕是无序的，那么在传入之前需要自己 .sort((a, b) => a.time - b.time) 一下。你还可以通过 danmaku 对象的 appendItems 和 resetItems 等方法，添加和重置弹幕。

清晰度切换

这个例子是使用 ControlItem 来实现视频的清晰度切换功能，这里使用 HLS，来切换视频清晰度。

import Player, { Popover } from "nplayer"import Hls from "hls.js"// 1. 首先创建一个控制条项const Quantity = {  el: document.createElement("div"),  init() {    this.btn = document.createElement("div")    this.btn.textContent = "画质";    this.el.appendChild(this.btn)    this.popover = new Popover(this.el)    this.btn.addEventListener("click", () => this.popover.show())    // 点击按钮的时候展示 popover    this.el.style.display = "none"    // 默认隐藏    this.el.classList.add("quantity")  }}// 2. 我们把它放到 spacer 后面window.player = new Player({  controls: [    [      "play",      "volume",      "time",      "spacer",      Quantity,      "airplay",      "settings",      "web-fullscreen",      "fullscreen"    ],    ["progress"]  ]})// 3. 创建 HLS 实例const hls = new Hls()hls.on(Hls.Events.MEDIA_ATTACHED, function () {  hls.on(Hls.Events.MANIFEST_PARSED, function () {    // 4. 给清晰度排序，清晰度越高的排在最前面    hls.levels.sort((a, b) => b.height - a.height)    const frag = document.createDocumentFragment()    // 5. 给与清晰度对应的元素添加，点击切换清晰度功能    const listener = (i) => (init) => {      const last = Quantity.itemElements[Quantity.itemElements.length - 1]      const prev = Quantity.itemElements[Quantity.value] || last      const el = Quantity.itemElements[i] || last      prev.classList.remove("quantity_item-active")      el.classList.add("quantity_item-active")      Quantity.btn.textContent = el.textContent      if (init !== true && !window.player.paused)        setTimeout(() => window.player.play())      // 因为 HLS 切换清晰度会使正在播放的视频暂停，我们这里让它再自动恢复播放      Quantity.value = hls.currentLevel = hls.loadLevel = i      Quantity.popover.hide()    }    // 6. 添加清晰度对应元素    Quantity.itemElements = hls.levels.map((l, i) => {      const el = document.createElement("div")      el.textContent = l.name + "P"      if (l.height === 1080) el.textContent += " 超清"      if (l.height === 720) el.textContent += " 高清"      if (l.height === 480) el.textContent += " 清晰"      el.classList.add("quantity_item")      el.addEventListener("click", listener(i))      frag.appendChild(el)      return el    })    const el = document.createElement("div")    el.textContent = "自动"    el.addEventListener("click", listener(-1))    el.classList.add("quantity_item")    frag.appendChild(el)    Quantity.itemElements.push(el)    // 这里再添加一个 `自动` 选项，HLS 默认是根据网速自动切换清晰度    Quantity.popover.panelEl.appendChild(frag)    Quantity.el.style.display = "block"    listener(hls.currentLevel)(true)    // 初始化当前清晰度  });  // 绑定 video 元素成功的时候，去加载视频  hls.loadSource("https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8");})hls.attachMedia(window.player.video)window.player.mount("#app")

.quantity {  position: relative;  padding: 0 8px;  cursor: pointer;  font-size: 14px;  font-weight: bold;  white-space: nowrap;  opacity: 0.8;}.quantity:hover {  opacity: 1;}.quantity_item {  padding: 5px 20px;  font-weight: normal;}.quantity_item:hover {  background: rgba(255, 255, 255, 0.3);}.quantity_item-active {  color: var(--theme-color);}

NPlayer监听

有下面 5 个事件相关的方法。

你可以使用这些方法监听内置事件或触发自定义事件。

NPlayer事件

NPlayer 事件名是大驼峰形式的字符串。