Bilibili视频窗口传送

<template>
<div id="small"></div>  //小窗口,一定要放在传送门前面
<div class="big">
  <Teleport to="#small" :disabled="isTeleport">
    <div id="mse"></div>
  </teleport>
  </div>
<div id="target"></div>//检测是否在视口内
<div style="width: 100%;height: 2000px;"></div>
</template>
<script setup lang="ts">
  import Player from 'xgplayer' //西瓜视频
  import { useIntersectionObserver } from '@vueuse/core' 
  import { onMounted, ref } from 'vue';
  let isTeleport = ref(true)
  onMounted(() => {
    const { stop } = useIntersectionObserver(
      document.querySelector('#target') as HTMLElement,
      ([{ isIntersecting }], observerElement) => {
      isTeleport.value = isIntersecting
      },
    )
    let player = new Player({
      id: 'mse',
      url: 'https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomi12proarp71i/video1-1.mp4',
      width: '100%',
      height: '100%'
    });
  })
</script>
<style>
  #small {
    position: fixed;
    right: 10vw;
    bottom: 10vh;
    width: 18vw;
    height: 20vh;
  }
</style>