部署到Vercel后Next.js 13/React应用背景视频无法播放求助

可能的原因 #

• 200MB+的大视频文件在Vercel部署时未被正确处理，尤其是曾使用GitHub LFS的情况下，Vercel默认不自动解析LFS指针
• 视频编码格式不兼容Vercel的媒体分发服务
• Next.js资源路径引用方式有误，导致部署后无法定位文件
• 浏览器自动播放策略限制（未静音的视频会被阻止播放）

具体解决步骤 #

1. 处理GitHub LFS的影响 #

• 检查仓库中的视频文件：如果是LFS指针文件（而非实际视频），Vercel部署时不会自动拉取真实文件
• 解决方式：
  • 要么将本地的真实视频文件提交到仓库（注意GitHub单文件大小限制，建议先压缩）
  • 要么在Vercel项目的「Deployment Settings」中开启「Git LFS」支持，让Vercel自动拉取LFS存储的文件

2. 压缩并优化视频文件 #

200MB的视频体积过大，会导致加载缓慢甚至部署失败，建议转码压缩：

• 使用FFmpeg转成H.264编码的高效MP4，示例命令：

  ffmpeg -i Water.mp4 -vcodec libx264 -crf 28 -preset medium -acodec aac -b:a 128k optimized-Water.mp4
  

• 压缩后替换原文件，尽量将体积控制在50MB以内

3. 修正视频组件代码 #

调整路径和属性，适配Next.js和浏览器自动播放规则：

<div className="z-10">
    <div className="overlay"></div>
    <video id="videoBG" className="w-full h-full object-cover" autoPlay loop muted playsInline>
        <source src="/Water.mp4" type="video/mp4"/>
    </video>
</div>

• 用绝对路径/Water.mp4替代相对路径，避免Next.js路由解析问题
• 添加muted和playsInline属性：现代浏览器要求自动播放的视频必须静音，playsInline适配移动端播放
• 增加w-full h-full object-cover样式，确保视频全屏覆盖容器

4. 验证部署状态 #

• 部署后查看Vercel的「Deployment Logs」，确认视频文件是否被正常上传，无报错信息
• 直接访问视频的完整URL（如https://your-app.vercel.app/Water.mp4），测试是否能正常下载和播放

内容的提问来源于stack exchange，提问作者Vendetti