本地开发HTML video正常播放，Netlify部署后无法显示

核心原因排查 #

你的问题出在生产环境资源路径不匹配或视频编码不符合浏览器标准，结合Netlify的构建特性，具体原因和解决步骤如下：

1. 静态资源路径错误（最可能的原因） #

本地开发时，src/assets目录会被开发服务器（如Vite、Webpack）处理并代理，但生产构建后，src是源码目录，不会被打包到输出产物中。你硬编码的src/assets/demo.mp4路径在Netlify上根本不存在，导致请求返回的是错误内容（比如404页面的HTML），即使浏览器返回206状态码（Netlify的路由 fallback可能导致部分响应），视频标签也无法解析。

解决步骤：

• 将视频文件移到项目的public目录（或框架指定的静态资源根目录，比如Vue/React的public文件夹）。
• 修改HTML中的src属性：如果视频放在public根目录，改为/demo.mp4；如果放在public/assets下，改为/assets/demo.mp4。
• 验证：部署后打开浏览器网络标签，复制视频请求的完整URL，直接访问该URL，确认能下载或播放视频。

2. 视频编码不符合浏览器标准 #

虽然你转成了MP4格式，但如果使用的是HEVC等非标准编码，本地系统播放器可能支持，但浏览器仅支持H.264（AVC）编码的MP4。

解决步骤：

• 用FFmpeg重新编码视频为标准H.264格式：

  ffmpeg -i 你的视频文件.mp4 -c:v libx264 -crf 23 -c:a aac -b:a 128k 输出文件名.mp4
  

• 替换原视频后重新部署。

3. 框架资源哈希重命名导致路径不匹配 #

如果你的项目使用Vite、Create React App等框架，构建时会对src/assets下的资源添加哈希后缀（如demo.abc123.mp4），但你硬写的路径没有包含哈希，导致请求失败。

解决步骤：

• 使用框架提供的资源引用方式：
  • Vue：用@/assets/demo.mp4（需配置别名），或在组件中import demoVideo from '@/assets/demo.mp4'，然后绑定到src属性。
  • React：import demoVideo from './assets/demo.mp4'，然后<source src={demoVideo} type='video/mp4' />。

关于206状态码的说明 #

206是浏览器请求视频分段时的正常响应状态码，本身不是问题，问题在于返回的内容不是可播放的视频数据（比如错误的HTML内容）。

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