使用Teleport实现视频小窗口播放

效果

 实现步骤

小视频窗口

<!-- 小视频窗口 -->
  <div
    id="fixbox"
    style="
      width: 300px;
      height: 300px;
      position: fixed;
      right: 20px;
      bottom: 20px;
    "
  ></div>

占位元素

<!-- 被监听出入视口的占位元素 -->
  <div id="box" style="width: 600px;height: 420px;position: absolute;left: 0;top: 0;"></div>

大视频窗口

<div class="bigbox" style="width: 600px;height: 420px;">
    <Teleport :disabled="disabled" to="#fixbox" >
      <div id="mse" style="width: 500px;height: 500px ;"></div>
    </Teleport>
  </div>

useIntersectionObserver

@vueuse/core 提供的一个钩子，用于检测元素的可视区域（视口）变化。它监听 #box 元素是否在视口内，更新 disabled 状态。isIntersecting 是布尔值，表示 #box 是否在视口内

完整代码

<template>
  <!-- 小视频窗口 -->
  <div
    id="fixbox"
    style="
      width: 300px;
      height: 300px;
      position: fixed;
      right: 20px;
      bottom: 20px;
    "
  ></div>
  <!-- 被监听出入视口的占位元素 -->
  <div id="box" style="width: 600px;height: 420px;position: absolute;left: 0;top: 0;"></div>
  <!-- 初始播放的大视频窗口 -->
  <div class="bigbox" style="width: 600px;height: 420px;">
    <Teleport :disabled="disabled" to="#fixbox" >
      <div id="mse" style="width: 500px;height: 500px ;"></div>
    </Teleport>
  </div>
  <div style="height: 2000px"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
const disabled = ref(true);
onMounted( () => {
    new Player({
      id: "mse", // 使用字符串 id
      lang: "zh", // 设置中文
      screenShot: true, // 截图
      width: "100%",
      height: "100%",
      // 视频源
      url: "http://vjs.zencdn.net/v/oceans.mp4",
      // 封面
      poster:
        "https://th.bing.com/th/id/R.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0",
      // 画中画
      pip: true,
    });

  useIntersectionObserver(
    document.getElementById("box"),
    ([{ isIntersecting }]) => {
      //返回布尔值
      disabled.value = isIntersecting;
      console.log(isIntersecting);
    }
  );
});
</script>

<style scoped></style>