您必须创建视频对象 URL。

import React, { useState } from "react"; 
import ReactPlayer from "react-player";

 const [videoFilePath, setVideoFilePath] = useState(null);


const handleVideoUpload = (event) => {
setVideoFilePath(URL.createObjectURL(event.target.files[0]));
};

....

<input type="file" onChange={handleVideoUpload} />

...

<ReactPlayer url={videoFilePath} width="100%" height="100%" controls={true} />

使用Create React App（简称 CRA），您可以将视频文件放在公共文件夹中，例如在子文件夹中videos。然后，您可以像在代码中那样访问该静态文件。

CRA将只是将文件复制到最终静态页面中所提到的文档。

如果您不使用 CRA 设置，则需要将您的视频复制到最终包，例如使用 Webpack。

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class Video extends Component {
    render () {
        return (
        <div className='player-wrapper'>
            <ReactPlayer
            className='react-player fixed-bottom'
            url= 'videos/demo_video.MP4'
            width='100%'
            height='100%'
            controls = {true}

            />
        </div>
        )
    }
}

export default Video;

您需要将本地视频文件导入到您的组件中。

import myVideo from '../media/M_03292018202006_00000000U2940605_1_001-1.MP4'

class Video extends Component {
  render () {
    return (
      <div className='player-wrapper'>
        <ReactPlayer
          url={myVideo}
          // ...
        />
      </div>
    )
  }
}

```

主要问题：所有的静态数据都应该放在public 文件夹中。任何视频、音频、图像等。

为什么？
公共文件夹不会被 Web-pack 处理，因此保持不变，你可以看到它的原样。把它放在其他地方会被 webpacks 处理、调整和优化，因此可能会改变视频文件的压缩或扩展，导致代码解析不正确（虽然它不会在图像中看到，但视频会受到它的影响）。

如何从代码访问公用文件夹？
每个文件 url 都指向公共文件夹。每个文件 url./都指向文件目录。
要访问public/video1.mp4只需写入url='video1.mp4'.

例如。

            <ReactPlayer playing url='video1.mp4'
                height='500px'
                width='800px'
                controls='true'
            />