更新记录

1.0.0（2025-10-31） 下载此版本

平台兼容性

uni-app(3.7.3)

其他

BackgroundVideo 视频背景组件

📱 适用平台

uni-app APP 端（基于 renderjs 实现）

✨ 核心功能

• 🎥 视频背景播放 - 自动循环播放，无需手动控制
• 📱 响应式适配 - 完美适配各种屏幕尺寸和旋转
• 🔄 本地/网络视频 - 自动识别和路径转换
• 🎚️ 可配置选项 - 静音、透明度、封面图等
• 📜 内容滚动 - 背景固定，内容层可滚动
• ⚡ 高性能 - renderjs 实现，流畅播放

• ⚠️ 注意事项

• 建议视频文件不超过 10MB
• 注意有时候更换本地视频地址会出现视频显示播放的还是旧视频说明是缓存问题
• 注意有时候更换本地视频地址会出现视频显示播放的还是旧视频说明是缓存问题
• 注意有时候更换本地视频地址会出现视频显示播放的还是旧视频说明是缓存问题
• 解决方式:更换视频文件名

  🚀 快速上手

1. 基础使用

<template>
  <BackgroundVideo src="/static/video/bg.mp4">
    <view class="content">
      你的页面内容
    </view>
  </BackgroundVideo>
</template>

<script>
import BackgroundVideo from '@/components/fd-BackgroundVideo/fd-BackgroundVideo.vue'
export default {
  components: { BackgroundVideo }
}
</script>

2. 完整配置

<BackgroundVideo 
  src="/static/video/bg.mp4"
  poster="/static/images/poster.jpg"
  :muted="true"
  :opacity="0.8"
  type="auto"
>
  <!-- 页面内容 -->
</BackgroundVideo>

📝 参数说明

📂 文件结构

💡 使用场景

• 首页视频背景
• 产品展示页
• 登录/注册页面
• 营销活动页
• 品牌宣传页