Next.js 13应用目录下video标签移动端无法播放问题求助

你的问题核心是移动端浏览器对视频自动播放的限制比桌面端更严格，再加上Next.js App目录默认的服务器组件特性影响了客户端播放逻辑，具体修复方案如下：

• 添加playsinline属性：iOS Safari和多数安卓浏览器要求这个属性才能让视频在页面内内嵌播放，否则会强制全屏，看起来就像停在第一帧。
• 切换为客户端组件：你的Page组件默认是服务器组件，而视频自动播放是纯客户端行为，必须加上'use client'指令切换为客户端组件，确保浏览器能正确处理播放逻辑。
• 检查视频编码兼容性：确认ac_movie.mp4使用的是H.264 Baseline编码，这是移动端支持最广泛的编码格式，避免使用High Profile或其他小众编码。
• 手动触发播放（可选）：部分浏览器即便满足静音条件，也需要在视频加载完成后显式调用play()，可以通过useEffect实现兜底处理。

修改后的代码示例：

'use client'; // 必须添加，切换为客户端组件

import { useEffect, useRef } from 'react';

export default function Page() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      // 兜底处理部分浏览器的自动播放限制
      video.play().catch(err => {
        console.log('播放触发失败:', err);
      });
    }
  }, []);

  return (
    <section className="relative h-screen flex flex-col items-center justify-center text-center bg-ac_color-dark text-ac_color-lightgold py-0 px-3">
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
        <video
          ref={videoRef}
          className="min-w-full h-[90vh] absolute object-cover z-2 opacity-50"
          src="/ac_movie.mp4"
          autoPlay
          muted
          loop
          playsinline // 新增属性，适配移动端内嵌播放
          preload="auto" // 可选：让浏览器提前加载视频数据
        />
      </div>
    </section>
  );
}

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