React JS中如何使用JSX标签正确加载显示本地视频

你之前的写法存在两个核心问题：一是静态资源路径引用方式不符合React脚手架的资源处理规则，二是video标签缺少必要的兼容属性，按以下步骤排查修复即可：

• 第一步：修正静态资源引用方式 #

  不同脚手架对src目录下静态资源的处理逻辑不同，不要直接写字符串相对路径引用，按你用的脚手架选对应写法：
  • Vite 搭建的项目
    src/assets下的资源必须通过import导入，或者用原生URL构造方法获取资源地址：

    // 组件顶部导入，注意根据你的组件实际位置调整相对路径层级
    import demoVideo from '../../assets/videos/video.mp4'
    
    // 如果不想提前导入，也可以在组件内用以下方式获取地址
    // const demoVideo = new URL('../../assets/videos/video.mp4', import.meta.url).href
    

  • Create React App 搭建的项目
    同样支持import导入src目录下的视频资源，如果反复导入失败，直接把视频文件移到public/videos目录下，src直接写/videos/video.mp4即可，不需要加相对路径前缀。

• 第二步：补全video标签必要属性，修正无效写法 #

  你之前把className写在<source>标签上是无效的，source标签只负责声明资源地址，不参与DOM渲染，所有样式类只需要加在外层video标签上。另外必须补全浏览器兼容的必要属性，否则部分浏览器会直接显示空白：

  <video
    className="object-cover w-full h-full rounded border-4 border-solid"
    muted // 必须加，现代浏览器禁止非静音视频自动加载/播放
    playsInline // 兼容iOS Safari，避免强制全屏导致显示异常
    preload="metadata" // 预加载视频首帧，保证进入页面就能显示画面
    controls // 调试阶段可以加，调出播放控制栏确认资源是否加载成功，功能做完可以删掉
  >
    <source src={demoVideo} type="video/mp4" />
    您的浏览器不支持video标签播放
  </video>
  

• 第三步：兜底排查 #

  如果按上面写法还是不显示，按以下顺序排查：
  1. 打开浏览器开发者工具-网络面板，筛选「媒体」类型，看视频请求的状态码：如果是404，说明路径层级写错了，数清楚当前组件到视频文件的目录层级，不要多写/少写../；如果是200，检查视频文件本身是否损坏，单独拖到浏览器里确认能正常播放。
  2. 检查视频文件名、后缀的大小写是否完全匹配，大小写敏感的系统下Video.mp4和video.mp4是两个不同文件。

• 附：鼠标悬停自动播放实现代码 #

  等视频基础展示正常后，直接用ref控制播放暂停即可，不需要引入额外依赖：

  import { useRef } from 'react'
  import demoVideo from '../../assets/videos/video.mp4'
  
  export default function VideoCard() {
    const videoRef = useRef(null)
  
    const handleHover = () => videoRef.current?.play()
    const handleLeave = () => {
      videoRef.current?.pause()
      videoRef.current.currentTime = 0 // 移出后重置到视频开头
    }
  
    return (
      <div 
        className="w-[320px] h-[200px] cursor-pointer"
        onMouseEnter={handleHover}
        onMouseLeave={handleLeave}
      >
        <video
          ref={videoRef}
          className="object-cover w-full h-full rounded border-4 border-solid"
          muted
          playsInline
          loop
          preload="metadata"
        >
          <source src={demoVideo} type="video/mp4" />
        </video>
      </div>
    )
  }
  

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