Next.js 13中视频src路径正确却无法显示的问题求助

针对Next.js场景（你提到app目录/next-video）的核心解决方案 #

• 修正静态资源存放路径：Next.js不会将app目录下的文件作为静态资源提供服务，必须把视频文件放到项目根目录的public文件夹中。之后修改video标签的src路径为根相对路径：

  <video controls preload="none">
    <source src="/nature-vid-1.mp4" type="video/mp4" />
  </video>
  

  验证：启动项目后，在浏览器直接访问http://localhost:3000/nature-vid-1.mp4，能正常打开/下载说明路径配置正确。

• 处理next-video水印问题：免费版next-video默认添加水印，若不想付费，直接用原生video标签配合public文件夹的方式即可替代，无需依赖第三方工具。

通用排查步骤 #

• 检查视频编码兼容性：确保MP4文件使用H.264视频编码 + AAC音频编码（这是所有现代浏览器都支持的标准）。如果编码不符，用FFmpeg转码：

  ffmpeg -i nature-vid-1.mp4 -vcodec libx264 -acodec aac fixed-nature-vid-1.mp4
  

• 查看浏览器控制台错误：按F12打开开发者工具，查看：

  • Network标签：确认视频请求的状态码（404=路径错误，200=路径正确但可能编码/格式问题）
  • Console标签：是否有“不支持的视频格式”之类的报错

• iframe无效的排查：如果iframe也无法加载，大概率是视频文件本身的问题（编码损坏、文件不完整），或者服务器的静态资源配置阻止了iframe访问。先确保视频能直接在浏览器打开，再尝试iframe引用绝对路径。

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