React应用中导入视频组件与HTML video标签后视频无法播放问题

核心排查与修复方案 #

1. 补充video标签必要属性 #

浏览器对自动播放有严格限制，且默认不会显示播放控件，这是导致静态画面的常见原因：

• 添加controls属性让用户能手动控制播放/暂停
• 若需自动播放，必须配合muted属性（浏览器政策要求）

修改后的自定义组件示例：

import React from "react";
import MyVideo from "../assets/video.mp4";

class MyVideoComponent extends React.Component {
  render() {
    return (
      <video 
        width="100%" 
        height="100%" 
        preload="auto"
        controls
        muted
        autoplay
      >
        <source src={MyVideo} type="video/mp4" />
        Your browser does not support HTML5 video.
      </video>
    );
  }
}

export default MyVideoComponent;

直接使用video标签的修改版本：

<video 
  width="auto" 
  height="auto" 
  controls
  muted
  autoplay
>
  <source src={require('../assets/video.mp4')} type="video/mp4" />
</video>

2. 验证资源路径与打包配置 #

• 确认../assets/video.mp4路径正确，视频文件确实存在于对应目录
• Create React App项目中，两种导入方式（import/require）均支持，但可通过打印路径验证是否正确：

  const videoUrl = require('../assets/video.mp4');
  console.log(videoUrl); // 应输出打包后的资源路径，如/static/media/video.xxxx.mp4
  

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

MP4是容器格式，内部编码不兼容会导致无法播放。浏览器通用支持H.264视频编码 + AAC音频编码的MP4文件，可通过FFmpeg转码：

ffmpeg -i input.mp4 -vcodec libx264 -acodec aac output_compatible.mp4

4. 处理DOM加载时序问题 #

视频可能因DOM未完全加载导致初始化失败，可通过React生命周期/钩子触发加载：

import React, { useEffect, useRef } from "react";
import MyVideo from "../assets/video.mp4";

const MyVideoComponent = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.load();
      // 自动播放失败时捕获浏览器限制错误
      videoRef.current.play().catch(err => console.log("自动播放受限:", err));
    }
  }, []);

  return (
    <video 
      ref={videoRef}
      width="100%" 
      height="100%" 
      preload="auto"
      controls
    >
      <source src={MyVideo} type="video/mp4" />
      Your browser does not support HTML5 video.
    </video>
  );
};

export default MyVideoComponent;

5. 排查CSS样式干扰 #

父容器的overflow、display或固定高度设置可能导致视频渲染异常。可临时移除父容器的flex、height等样式，测试视频是否正常播放，再逐步恢复样式定位问题。

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