React网站上线后视频无法播放，仅Firefox可用问题求助

先澄清无关错误 #

你控制台看到的chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map错误，是Chrome浏览器插件（大概率是AdBlock类插件）的自身问题，和你的视频播放完全无关，不用在项目里折腾source map相关设置，直接忽略即可。

下面针对视频黑屏问题给出具体排查和解决步骤：

1. 确认线上视频文件路径是否正确 #

打开浏览器开发者工具（F12）→ 切换到「网络」标签→ 刷新页面→ 过滤「媒体」类型，找到bg_video1.mp4的请求：

• 如果请求返回404错误：说明打包后的视频路径和实际部署路径不匹配
  • 解决：如果项目部署在子域名/子目录下，在package.json中添加"homepage": "你的实际部署路径"（比如"homepage": "/portfolio/"），然后重新打包部署。
  • 同时检查build/static/media/目录下是否存在该视频文件，对比浏览器请求的URL和实际文件路径是否一致。

2. 补充视频标签的关键属性 #

浏览器的自动播放策略会阻止带声音的视频自动加载播放，导致黑屏。给video标签加上muted和playsInline属性：

<video 
  src={video_bg} 
  autoPlay 
  loop 
  muted 
  playsInline
  className='RO__Parallax_foreground-video'
/>

• muted：静音是浏览器允许自动播放的核心条件，几乎所有现代浏览器都要求静音才能自动播放视频
• playsInline：解决移动端浏览器强制全屏播放的问题，同时兼容桌面端

3. 检查视频编码兼容性 #

本地能播放不代表线上服务器和所有浏览器都支持，MP4视频必须采用H.264视频编码 + AAC音频编码的标准格式：

• 用免费工具（如HandBrake）重新转码视频：选择「H.264」编码，音频设置为「AAC」，输出MP4格式，替换原视频文件后重新打包部署。

4. 确保服务器MIME类型配置正确 #

即使你修改了.htaccess，也要确认配置是否生效：

• Apache服务器（.htaccess）：

AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogg

• Nginx服务器：在站点配置中添加：

types {
    video/mp4 mp4 m4v;
    video/webm webm;
    video/ogg ogg;
}

配置完成后重启服务器，确保MP4文件能被正确识别为视频类型。

5. 检查服务器文件权限 #

线上服务器的静态文件目录（如build/static/media/）和视频文件必须设置为可读权限（一般为755），否则浏览器无法读取文件：

• 通过FTP工具或服务器终端查看文件权限，确保视频文件的权限和其他正常显示的图片文件一致。

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