如何使用react-player播放通过mui-file-input获取的File对象？

ReactPlayer的url属性不直接支持传入File对象，需要先将File转换为浏览器可识别的Blob URL才能正常播放，具体实现步骤如下：

核心实现逻辑 #

1. 维护状态存储生成的Blob URL
2. 拿到File对象后通过URL.createObjectURL()生成可播放的URL
3. 及时销毁Blob URL避免内存泄漏

完整代码示例 #

import { useState, useEffect } from 'react';
import { FileInput } from 'mui-file-input';
import ReactPlayer from 'react-player';

const LocalVideoPlayer = () => {
  const [videoUrl, setVideoUrl] = useState(null);

  const handleFileChange = (file) => {
    // 清空旧URL避免内存泄漏
    if (videoUrl) {
      URL.revokeObjectURL(videoUrl);
    }

    if (file) {
      // 将File对象转为Blob URL
      const blobUrl = URL.createObjectURL(file);
      setVideoUrl(blobUrl);
    } else {
      setVideoUrl(null);
    }
  };

  // 组件卸载时销毁剩余的Blob URL
  useEffect(() => {
    return () => {
      if (videoUrl) {
        URL.revokeObjectURL(videoUrl);
      }
    };
  }, [videoUrl]);

  return (
    <div style={{ maxWidth: 800, margin: '20px auto' }}>
      <FileInput
        accept="video/*" // 限制仅选择视频文件，避免无效文件
        label="选择本地视频"
        onChange={handleFileChange}
        value={null}
      />
      
      {videoUrl && (
        <div style={{ marginTop: 20 }}>
          <ReactPlayer
            url={videoUrl}
            controls
            width="100%"
            height="auto"
            playing={false}
          />
        </div>
      )}
    </div>
  );
};

export default LocalVideoPlayer;

关键注意事项 #

• 每次更换文件或清空选择时，必须调用URL.revokeObjectURL()销毁旧的Blob URL，防止浏览器内存泄漏
• 通过accept="video/*"限制文件类型，可以避免用户选择非视频文件导致的播放异常
• 确保已正确安装依赖：npm install mui-file-input react-player

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