NPlayer 支持任何流媒体和 B 站弹幕体验一样的视频播放器

NPlayer 是由 Typescript 加 Sass 编写，无任何第三方运行时依赖，Gzip 大小只有 21KB，兼容 IE11，支持 SSR。该播放器高度可定制，所有图标、按钮、色彩等都可以替换，并且提供了 内置组件 方便二次开发。它还拥有插件系统，弹幕功能 就是使用插件形式提供。该播放器可以接入任何 流媒体，如 hls、dash 和 flv 等。

• 官网：https://nplayer.js.org
• 源码：https://github.com/woopen/nplayer
• 在线编辑 & 预览：https://codesandbox.io/s/ancient-sky-ujtms?file=/src/index.js

安装

使用如下命令快速安装 NPlayer。

npm i -S nplayer

更多请查看 安装。

开始使用

import Player from 'nplayer'

const player = new NPlayer({
   
  src: 'https://v-cdn.zjol.com.cn/280443.mp4'
})

// player.mount('#app')
player.mount(document.body)

上面是创建一个播放器最简单的方法，创建一个 player 对象，设置视频元素的 src，然后将它挂载到 document.body 中。

当然你也可以自己提供 video 元素。

import Player from 'nplayer'

const video = document.createElement('video')
video.src = 'https://v-cdn.zjol.com.cn/280443.mp4'
const player = new Player({
    video, videoAttrs: {
    autoplay: 'true' } })

player.mount(document.body)

你还可以使用 videoAttrs 参数，将视频元素的属性添加到这个 video 元素上，videoAttrs 有一些默认值，它会和你传入的合并再设置到视频元素上，详情请查看 参数章节 。

player.mount 方法可以将播放器挂载到页面上，它接收一个参数，可以是一个字符串或一个 dom 元素。当是字符串时，将会自动查找该 dom 元素。

预览缩略图

当鼠标放到进度条上时就会出现，一个小缩略图来预览这个时间点的截图，现在很多视频网站都有这个功能。NPlayer 也提供了这个功能。

NPlayer 的缩略图有 thumbnail 参数设置，它是一个缩略图配置对象，具体接口如下：

interface ThumbnailOptions {
   
  startSecond?: number;
  gapSecond?: number;
  row?: number;
  col?: number;
  width?: number;
  height?: number;
  images?: string[];
}

它个各个属性默认值如下：

{
   
  startSecond: 0,
  gapSecond: 10,
  col: 5,
  row: 5,
  width: 160,
  height: 90,
  images: []
}

这个预览缩略图其实是由一堆分辨率较小的截图组成的一张图片，如下所示。

我们可以看到这个雪碧图由 5 x 5 的小缩略图组成，当然一个视频可能有一堆上面这种雪碧图，这就是上面 images 是一个数组字符串的原因。<