create-react-app项目yarn启动正常 打包后video无法自动播放

这不是资源路径、视频源文件、代码写法的问题，本质是两个条件叠加触发的兼容差异：

• 所有主流浏览器的自动播放硬规则：没有用户主动交互的前提下，要让视频自动播放，必须在DOM第一次被浏览器解析挂载完成的瞬间，同时满足三个条件：存在autoplay标识、muted状态为真、不会输出可听的音频内容，任意一个条件在检查时刻不满足，浏览器会直接拦截播放流程，控制台抛出NotAllowedError类型的报错，后续哪怕状态补全，浏览器也不会重试自动播放。
• CRA 开发环境和生产构建的渲染时序差：开发环境下React是同步逐属性给DOM赋值的，浏览器刚好能在检查时刻读到全部符合要求的video属性，自动播放自然正常；但生产构建开启了生产环境的性能优化逻辑后，对muted、autoPlay这类布尔型HTML属性的赋值，是走批量的异步DOM补丁流程，会出现时序错位——浏览器先拿到「未设置静音的video标签」，做完自动播放检查拦截了播放，之后React才异步给这个元素补上静音、自动播放的属性，这时候已经错过了浏览器的检查窗口，自然放不出来。

你之前尝试的ES模块导入视频源、替换线上视频链接、用dangerouslySetInnerHTML注入原生video标签的方案都没生效，本质就是没解决这个渲染时序错位的问题——哪怕你把原生HTML写得完全符合规范，只要生产构建下的属性赋值时序不对，还是会错过浏览器的自动播放检查窗口，触发拦截。

• 方案一：跳过React的属性赋值流程，对齐浏览器的检查时序
  不需要靠dangerouslySetInnerHTML绕弯，直接用ref在组件挂载完成后，给真实DOM手动设置状态、触发播放：

import { useRef, useEffect } from 'react';

function BackgroundVideo() {
  const videoRef = useRef(null);
  useEffect(() => {
    if (!videoRef.current) return;
    // 直接在真实DOM上强制设置静音，手动触发播放
    videoRef.current.muted = true;
    videoRef.current.play().catch(err => {
      // 捕获播放拦截的异常，避免控制台飘错
      console.warn('自动播放被拦截，可按需补充用户首次交互后的重放逻辑', err);
    })
  }, [])

  return (
    <div className='video_container'>
      <video
        ref={videoRef}
        preload='auto'
        loop
        playsInline
        className='video_bg'
      >
        <source src='/assets/bg.mp4' type='video/mp4' />
        <source src='/assets/bg.webm' type='video/webm' />
        <span>Your browser doesn't support mp4/webm formats :(</span>
      </video>
    </div>
  )
}

这个方案从根源上消除了时序差，不管是开发环境还是生产构建，video的状态都是在浏览器检查之前就设置完成的，完全符合浏览器自动播放规则。

• 方案二：调整video标签的属性写法，避免React生产环境的属性丢失
  如果你不想引入ref逻辑，可以把React驼峰写法的布尔属性，替换成原生无值的HTML属性写法，避免生产构建的虚拟DOM差分逻辑导致的初始属性缺失。需要注意构建完成后检查最终生成的DOM，确认video标签的初始解析状态和下面的原生HTML结构一致：

<video 
  loop 
  muted 
  autoplay 
  playsinline 
  class="video_bg"
></video>

不要用muted={true}、autoPlay这类React驼峰写法赋值，这类写法在生产构建的属性序列化阶段，很容易出现首次渲染不落地的问题。

• 最后做一步校验：打开浏览器Network面板，确认生产环境加载视频文件时，响应头没有被服务器或者部署规则加上媒体资源拦截的CSP策略，毕竟你已经确认资源路径和文件存在的问题，这一步只需要扫一眼响应头即可，不需要额外改代码。

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