使用IntersectionObserver观察video离开视口时停止播放

暄和同学

已于 2023-04-23 15:39:35 修改

阅读量215

点赞数

文章标签： javascript 前端 reactjs

于 2023-04-23 15:31:14 首次发布

本文链接：https://blog.csdn.net/weixin_45897146/article/details/130322409

版权

    const videoRefList = useRef<Array<HTMLVideoElement>>([])

    const observer = new IntersectionObserver((entries, self) => {
        entries.forEach((entry) => {
            //播放器离开视口暂停视频并解除观察
            if (!entry.isIntersecting) {
                (entry.target as HTMLVideoElement).pause()
                self.unobserve(entry.target)
            }
        })
    });
    //组件卸载时清除监听
    useEffect(() => {
        return () =>{
            observer.disconnect()
        }
    }, [])

	<video
		controls
		muted
		autoPlay
		poster={mainUrl}
		src={url}
		onPlay={()=>{
		    videoRefList.current.forEach((node,i)=>{
		        //播放当前视频时添加观察
		        if(i === index && node){
		            observer.observe(node)
		        }
		    })
		}}
		ref={(node)=>{
		    if(node){
		        videoRefList.current[index] = node
		    }
		}}
	>
	</video>