如何用React播放本地视频文件？路径加载问题求解

你遇到的问题本质是浏览器安全限制和React打包工具的资源加载规则导致的：

• 直接写绝对路径（比如/home/tashif/Downloads/CSS/1.mp4）时，浏览器出于安全策略，会阻止网页直接访问本地文件系统的任意路径（同源策略限制，本地文件协议file://下的跨路径访问被禁止）。
• 使用require()加载时，Create React App这类打包工具会限制资源必须在项目src/目录内，因为它会把资源打包到构建产物中，外部路径不在打包范围内，所以报错。

不需要换回原生JavaScript，React完全可以实现你的需求——核心是通过用户主动选择文件的方式获取本地视频，这是浏览器允许的唯一合法路径（因为用户授权了访问）。

实现步骤与代码示例 #

通过文件选择器让用户挑选本地视频，然后生成临时可访问的URL赋值给video标签：

import { useState, useEffect } from 'react';

function LocalVideoPlayer() {
  // 存储视频的临时URL
  const [videoSource, setVideoSource] = useState(null);

  // 处理文件选择事件
  const handleFileSelect = (event) => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      // 生成浏览器可识别的临时Blob URL
      const tempUrl = URL.createObjectURL(selectedFile);
      setVideoSource(tempUrl);
    }
  };

  // 组件卸载时释放临时URL，避免内存泄漏
  useEffect(() => {
    return () => {
      if (videoSource) {
        URL.revokeObjectURL(videoSource);
      }
    };
  }, [videoSource]);

  return (
    <div>
      {/* 文件选择器，限制仅能选择视频文件 */}
      <input type="file" accept="video/*" onChange={handleFileSelect} />
      {/* 当有视频URL时渲染播放器 */}
      {videoSource && (
        <video className="myVideo" src={videoSource} controls autoPlay />
      )}
    </div>
  );
}

export default LocalVideoPlayer;

关键说明 #

• accept="video/*"：限制文件选择器只能选择视频类型文件，提升用户体验。
• URL.createObjectURL()：将用户选择的本地文件转换为浏览器可以安全访问的临时URL，这个URL只在当前会话有效，不会暴露用户的本地文件路径。
• 资源释放：使用useEffect在组件卸载时调用URL.revokeObjectURL()，避免内存占用过高。

为什么不能直接用绝对路径？ #

浏览器的安全模型禁止网页未经用户授权直接访问本地文件系统的任意路径，这是为了防止恶意网站窃取用户本地文件。无论用React还是原生JavaScript，都必须通过用户主动选择的方式获取本地文件权限。

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