vue3 teleport(传送门）视屏小窗口应用

2024年3月20日 130次阅读 来源: suzhiwei_boke

需求分析

1.初始化一个视频播放

2.打视频播放区域有如果在视口外 小窗口出现

3.大视频和小视频在切换的时候保持视频状态不变

思路分析：

1.video 西瓜视频播放器 成熟的视频插件

2.监控大视频播放区域是否在视口内 vueUse 的三方插件

3.Teleport 保持dom状态的前提下完成传送


<script setup>
// 1.初始化大视频播放区域 西瓜视频播放器  yarn add xgplayer
// 2.监听大视频是否在视口区域内 vueUse yarn add @vueuse/core
// 
import Player from 'xgplayer'
import { onMounted,ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core'
const disabled = ref(true)
onMounted(()=>{
  let player =new Player({
  id: 'mse',
  url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  width:'100%',
  height:'100%',
  // poster:poster
});
 const { stop } = useIntersectionObserver(
      document.getElementById('videoContainer'),
      ([{ isIntersecting }], ) => {
       //isIntersecting 布尔值 如果在视口区域内 true 否则就是false
       console.log(isIntersecting)
       // 根据是否在视口区域决定小窗口是否播放
       // isIntersecting 作为判断条件
       disabled.value = isIntersecting

      },
    )
})

</script>
<template>
  <!--  要传送到的小视频播放器 -->
  <div id="small"></div>

  <!-- 被监听出入视口的占位元素 -->
  <div class="observeContainer" id="videoContainer"></div>
  <!-- 初始播放的大视频窗口 -->
  <div class="bigBox">
    <!-- 保持dom状态不变下，自由的穿梭功能 -->
    <Teleport to="#small"  :disabled="disabled">
    <div id="mse"></div>
    </Teleport>
  </div>
  <!-- 模拟滚动 -->
  <div style="height:1000px;"></div>
</template>
<style>
.bigBox{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 400px;
    height: 200px;
    /* border: 1px solid black; */

}
#mse{
  /* object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 */
  /* object-fit: cover; */
  /* 好像不起效果 */
}
#small{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 100px;
}
</style>

    原文作者：suzhiwei_boke
    原文地址: https://blog.csdn.net/suzhiwei_boke/article/details/124090671
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞