需求效果如图

在视频滚动出视口的时候，在底部用小窗口继续播放视频

需求分析

1.初始化一个视频播放 2.如何将视频大窗口转移到小窗口(完全一致地转移，保持视频状态不变) 3.如何判断视频大窗口滚动出了视口

具体实现

1.视频播放选择了开源的视频库，比如字节的西瓜视频组件

首先安装

npm install xgplayer

在项目中引入

import Player from 'xgplayer'

实例化 mse是占位dom的id

 let player=new Player({
    id:'mse',
    url:"https://media.w3.org/2010/05/sintel/trailer.mp4",
  })

2.Vue3有个Teleport的API，可以帮助我们实现转移Dom内容的需求

定义好大小视频的窗口，这样大窗口的内容就可以转移到小窗口了，用teleport的disabled属性来控制什么时候转移，需要用到第3点的内容。

<!-- 要传送的小窗口 -->
  <div id="small"></div>

<!-- 初始化播放的大视频窗口 -->
  <div class="bigBox">
    <Teleport to='#small' :disabled="isMoblie">
    <div id="mse"></div>
    </Teleport>
  </div>

如何判断视频大窗口滚动出了视口

当然可以使用Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。然后通过window.innerHeight和window.innerWidth获取视口的大小，然后比较差值判断元素位置。通过window.innerHeight和window.innerWidth获取视口的大小，然后比较差值判断元素位置。

这里利用另外更方便的工具方法来实现, Vueuse的useIntersectionObserver方法可以帮助我们更简单地实现

import { useIntersectionObserver } from '@vueuse/core'

const { stop } = useIntersectionObserver(
      document.getElementById('videoContainer'),
      ([{ isIntersecting }]) => {
       isMoblie.value=isIntersecting
        console.log(isIntersecting)
        //根据是否视口区域决定小窗口是否要播放
        //isIntersecting作为判断条件
      },
    )
})

通过对isMoblie的赋值就可以实现完整功能啦

B站视频滚动小窗实现