最近在浏览B站（Bilibili）时，我发现了一个非常实用的功能：当你在观看视频时，如果向下滚动页面，视频会自动缩小并固定在页面的一角继续播放。
这种小屏播放功能极大地提升了用户体验，让用户即使在浏览其他内容时也能继续观看视频。
于是我决定在自己的项目中实现这一功能。
效果演示
实现功能
第一步：创建视频组件
首先，我们创建一个视频组件VideoPlayer.vue，用于显示视频内容。
在 src/components/ 目录下创建 VideoPlayer.vue 文件，内容如下：
<template> <div class="video-player" ref="videoPlayer"> <video ref="video" :src="videoSrc" controls @play="handlePlay" @pause="handlePause" ></video> </div> </template> <script setup> import { ref, watch }from'vue'; const props =defineProps({ videoSrc:{ type:String, required:true, }, }); const videoPlayer =ref(null); const isMiniPlayer =ref(false); consthandlePlay=()=>{ window.addEventListener('scroll', handleScroll); }; consthandlePause=()=>{ window.removeEventListener('scroll', handleScroll); }; consthandleScroll=()=>{ const rect = videoPlayer.value.getBoundingClientRect(); isMiniPlayer.value= rect.top<0; }; watch(isMiniPlayer,(newValue) =>{ if(newValue){ videoPlayer.value.classList.add('mini-player'); }else{ videoPlayer.value.classList.remove('mini-player'); } }); </script> <style scoped> .video-player { position: relative; width:100%; max-width:640px; margin:0auto; } .video-player.mini-player{ position: fixed; bottom:20px; right:20px; width:200px; height:112.5px;/* 16:9 aspect ratio */ z-index:1000; box-shadow:02px10pxrgba(0,0,0,0.2); } </style>
第二步：在主应用中使用视频组件
接下来，我们在主应用组件 App.vue 中使用这个视频组件。
打开 src/App.vue，修改内容如下：
<template> <div id="app"> <header> <h1>Vue3实现 B站小屏播放功能</h1> </header> <main> <VideoPlayer videoSrc="https://www.w3schools.com/html/mov_bbb.mp4" /> <div class="content"> <p>滚动页面看看效果吧！</p> <!-- 模拟其他内容 --> <p v-for="i in 100" :key="i">这是模拟的内容{{ i }}</p> </div> </main> </div> </template> <script setup> import VideoPlayer from './components/VideoPlayer.vue'; </script> <style> #app { font-family:Avenir,Helvetica,Arial, sans-serif; text-align: center; color:#2c3e50; } header{ background-color:#42b983; padding:20px; color: white; } main{ padding:20px; } .content{ margin-top:20px; text-align: left; } </style>
第三步：添加 CSS 样式
为了使小屏播放功能更加美观，我们需要添加一些 CSS 样式。在 src/assets/ 目录下创建 styles.css 文件，内容如下：
body { margin:0; font-family:Avenir,Helvetica,Arial, sans-serif; } #app { margin:0auto; } header{ background-color:#42b983; color: white; padding:20px0; text-align: center; } main{ padding:20px; } .content{ margin-top:20px; } .video-player{ position: relative; width:100%; max-width:640px; margin:0auto; } .video-player.mini-player{ position:fixed; bottom:20px; right:20px; width:200px; height:112.5px;/* 16:9 aspect ratio */ z-index:1000; box-shadow:02px10pxrgba(0,0,0,0.2); }
在 src/main.js 中引入该样式文件：
import { createApp } from 'vue'; import App from './App.vue'; import './assets/styles.css'; createApp(App).mount('#app');
