React开发TikTok克隆项目时视频组件无法显示播放问题求助

安全阿岳

2026-10-2

问题排查及修复方案

1. 视频资源路径错误（最高概率）

React 不会解析 <source> 标签内写的相对路径静态资源，你需要按照你存放视频的位置调整路径：

如果把 video.mp4 放在项目的 public 文件夹下，直接修改 source 的 src 为 /video.mp4 即可：

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

如果把 video.mp4 放在 src 目录下（比如 src/assets/video.mp4），需要先导入再使用：
在 Video 组件顶部加导入语句：

import videoSrc from './assets/video.mp4'

然后修改 source 标签为：

<source src={videoSrc} type="video/mp4" />

2. 补充 video 标签必要属性

给 video 标签加预加载配置、播放逻辑容错处理，避免运行报错：
修改后的 Video 组件完整代码参考：

import React, { useRef } from "react";
import "./Video.css";
// 如果你把视频放在src/assets下就打开下面的导入
// import videoSrc from './assets/video.mp4'

function Video() {
  const videoRef = useRef(null);

  const onVideoPress = () => {
    // 加空值判断避免报错
    if (!videoRef.current) return
    if (videoRef.current.paused) {
      videoRef.current.play()
    } else {
      videoRef.current.pause()
    }
  };
  return (
    <div className="video">
      {/* 加preload预加载视频，加muted兼容浏览器播放限制 */}
      <video 
        height="500px" 
        width="300px" 
        onClick={onVideoPress} 
        ref={videoRef}
        preload="auto"
        muted
      >
        {/* 用public下的资源就写src="/video.mp4"，用src下的就写src={videoSrc} */}
        <source src="/video.mp4" type="video/mp4" />
      </video>
    </div>
  );
}

export default Video;