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

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)

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)

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: []
}

ffmpeg -i ./test.webm -vf 'fps=1/10:round=zero:start_time=-9,scale=160x90,tile=5x5' M%d.jpg

new Player({  thumbnail: {    startSecond: 1,    images: ['M1.jpg', 'M2.jpg', 'M3.jpg']
  }
})

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)

import Player from 'nplayer'import Hls from 'hls'// 1. 首先创建一个控制条项const Quantity = {  element: document.createElement('div'),  init(player) {    this.btn = document.createElement('div')    this.btn.textContent = '画质'
    this.element.appendChild(this.btn)    this.popover = new player.Player.components.Popover(this.element)    this.btn.addEventListener('click', () =>  this.popover.show())    // 点击按钮的时候展示 popover
    this.element.style.display = 'none'
    // 默认隐藏
    this.element.classList.add('quantity')
  }
}// 2. 我们把它放到 spacer 后面const player = new Player({  controls: ['play', 'volume', 'time', 'spacer', Quantity, 'airplay', 'settings', 'web-fullscreen', 'fullscreen'],
})// 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 && !player.paused) setTimeout(() => 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(styles.QuantityItem)
    frag.appendChild(el)    Quantity.itemElements.push(el)    // 这里再添加一个 `自动` 选项，HLS 默认是根据网速自动切换清晰度

    Quantity.popover.panelElement.appendChild(frag);    Quantity.element.style.display = 'block';    listener(hls.currentLevel)(true)    // 初始化当前清晰度
  })  // 绑定 video 元素成功的时候，去加载视频
  hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
})

hls.attachMedia(player.video)
player.mount(container.current);const dispose = () => {
  hls.destroy()
  player.dispose()
}// 调用 dispose 将销毁视频

npm i -S @nplayer/danmaku

import Player from "nplayer";import Danmaku from "@nplayer/danmaku";import items from "./items";const danmaku = new Danmaku({ items });const player = new Player({  src: "https://v-cdn.zjol.com.cn/280443.mp4",  plugins: [danmaku]
});

player.mount(document.body);