Next.js 13.4头部视频移动端无法播放问题求助

1. 视频格式兼容性不足 #

移动端浏览器对WebM格式的支持存在差异，比如Safari iOS早期版本不支持WebM，即使是新版本也可能存在兼容性问题。仅提供WebM格式会导致部分移动端无法加载视频。

解决方法：同时提供MP4格式的视频作为 fallback，MP4是移动端兼容性最好的视频格式，优先让浏览器选择合适的格式。

<video
  id="background-video"
  autoPlay
  playsInline
  loop
  muted
  className="absolute left-0 top-0 w-full h-full object-cover -z-2"
>
  <source src="/header-webm.webm" type="video/webm" />
  <source src="/header-mp4.mp4" type="video/mp4" />
</video>

2. 静态资源路径错误 #

Next.js 13.4中，静态资源需放在项目根目录的public文件夹下，使用绝对路径（/文件名）访问。你使用的相对路径./header-webm.webm会导致移动端无法正确加载资源。

解决方法：将视频文件移入public文件夹，修改src属性为绝对路径，比如/header-webm.webm。

3. 移动端自动播放限制未满足 #

即使添加了muted和playsInline，部分移动端浏览器（尤其是Safari）对自动播放的要求更严格：

• 视频必须完全静音（包括无音轨）
• 部分浏览器需要preload属性辅助预加载

解决方法：

• 使用工具（如ffmpeg）移除视频音轨：ffmpeg -i input.webm -an output.webm
• 添加preload="auto"属性，确保浏览器预加载视频
• 确保muted属性正确传递，不要遗漏或设置为false

调整后的代码：

<video
  id="background-video"
  autoPlay
  playsInline
  loop
  muted
  preload="auto"
  className="absolute left-0 top-0 w-full h-full object-cover -z-2"
>
  <source src="/header-webm.webm" type="video/webm" />
  <source src="/header-mp4.mp4" type="video/mp4" />
</video>

4. CSS层级与尺寸问题 #

移动端可能因容器定位、尺寸或层级问题导致视频被隐藏：

• 父容器未设置position: relative，导致视频绝对定位失效
• z-index: -z-2可能让视频被其他元素覆盖
• w-[100%] h-[100%]在移动端可能不如w-full h-full适配性好

解决方法：

• 给视频的父容器添加position: relative
• 暂时移除-z-2测试视频是否显示，再调整层级
• 用w-full h-full替代w-[100%] h-[100%]

5. 服务器组件限制 #

Next.js 13默认组件为服务器组件，视频的客户端交互属性（如autoPlay）无法在服务器组件中正常生效，因为服务器组件不会在客户端执行JS逻辑。

解决方法：在组件文件顶部添加'use client'，将组件转为客户端组件：

'use client';

export default function HeaderBackgroundVideo() {
  return (
    <video
      id="background-video"
      autoPlay
      playsInline
      loop
      muted
      preload="auto"
      className="absolute left-0 top-0 w-full h-full object-cover -z-2"
    >
      <source src="/header-webm.webm" type="video/webm" />
      <source src="/header-mp4.mp4" type="video/mp4" />
    </video>
  );
}

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