迷你播放器

当我们向下滚动网页时，播放器消失在视口中，一般会出现一个 Mini 播放器在右下角播放视频。

在 NPlayer 中通过 bpControls 参数和 mount() 方法，可以非常轻松的实现 Mini 播放器功能。

import Player from 'nplayer'

const videoContainer = document.querySelector('.video_container')
const miniContainer = document.querySelector('.mini_container')

const player = new Player({
  src: 'https://v-cdn.zjol.com.cn/280443.mp4',
  bpControls: {
    500: [
      ['play', 'progress', 'time'],
    ]
  }
})

const interObserver = new IntersectionObserver((entries) => {
  player.mount(entries[0].isIntersecting ? videoContainer : miniContainer)
}, {
  root: null,
  threshold: 0
})

interObserver.observe(videoContainer);

上面通过 IntersectionObserver 来检测当前播放器是否在视口中可见，如果不可见就将播放器挂载到 Mini 容器元素中。

上面省略了 HTML 和 CSS 并假设 Mini 容器宽度小于 500，所以当播放器挂载到 Mini 容器中，就会应用 bpControls 中 500 的布局，从而隐藏掉一些非必要的控制项。