React首页Hero区域自动播放MP4视频无法显示求助

问题排查与修复步骤 #

1. 资源路径引用错误（核心问题） #

React项目中直接使用相对路径../../assets/video/Timeline1.mp4无法被webpack正确解析，需改用以下两种方式：

方式一：通过import导入资源

import React from 'react';
import '../../App.css';
// 直接导入视频资源，webpack会自动处理路径
import videoMP4 from '../../assets/video/Timeline1.mp4';
import videoWEBM from '../../assets/video/Timeline1.mp4'; // 统一文件名大小写

const style = {
  heroStyle : {
    display: 'flex',
    justifyContent: 'center',
    width: '100%',
    height: '100%'
  },
  containerStyle: {
    position: 'absolute',
    top: '0',
    right: '0',
    bottom: '0',
    left:'0',
    overflow: 'hidden',
    width: '100%',
    height: '100%',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center', 
  },
}

function Home() {
  return (
    <div className="hero" style={style.heroStyle}>
      <div className="video-container" style={style.containerStyle}>
        <video width="100%" loop autoplay muted playsInline>
          <source src={videoMP4} type="video/mp4"/>
          <source src={videoWEBM} type="video/webm"/>
        </video>
      </div>
    </div>
  );
}

export default Home;

方式二：将视频放入public目录

把视频文件移到项目根目录的public/video文件夹下，使用绝对路径引用：

<source src="/video/Timeline1.mp4" type="video/mp4"/>

2. 补充视频元素必要属性 #

• 添加playsInline：避免移动端浏览器强制全屏播放，确保视频在容器内渲染
• 设置objectFit: cover：保证视频填满容器且不失真

<video 
  width="100%" 
  height="100%" 
  style={{objectFit: 'cover'}} 
  loop 
  autoplay 
  muted 
  playsInline
>

3. 修复容器定位与尺寸问题 #

给.hero容器添加相对定位和视口高度，确保子元素的绝对定位基于该容器：

heroStyle : {
  display: 'flex',
  justifyContent: 'center',
  width: '100%',
  height: '100vh', // 占满整个视口高度
  position: 'relative' // 作为绝对定位子元素的参照
},

4. 统一文件名大小写 #

代码中两个source的文件名分别是Timeline1.mp4和TimeLine1.mp4，大小写不一致，需与实际文件名称严格匹配，避免路径匹配失败。

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