最近在浏览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);
};
// 堆代码 duidaima.com
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');