Skip to main content

Mini player

当我们向下滚动网页时,播放器消失在视口中,一般会出现一个 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 容器中,就会应用 bpControls500 的布局,从而隐藏掉一些非必要的控制项。