墙裂推荐！Vue3 实现B站页面滚动开启小屏播放功能，超简单！！

大家好，我是CodeQi！ 

最近在浏览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');

---

祝你编码愉快！Happy coding!

关注我，原创文章第一时间推送， 点赞和收藏就是最大的支持❤️