Javascript React.js-React播放器如何播放本地视频

我目前正在尝试在react.js的本地主机上播放视频。我正在使用react player模块创建视频播放器组件。我可以使用URL（如youtube和facebook链接）播放视频，但无法使用文件路径播放本地视频。我阅读了github上关于该模块的所有文档，但找不到答案，这就是为什么我在这里问您这个问题。 下面是我的代码：

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= 'M_03292018202006_00000000U2940605_1_001-1.MP4'
            width='100%'
            height='100%'
            controls = {true}

          />
        </div>
      )
    }
  }

  export default Video;

import React，{Component}来自“React”
从“react player”导入react player
类视频扩展组件{
渲染（）{
返回(
)
}
}
导出默认视频；

您需要将本地视频文件导入组件

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>
    )
  }
}

```

从“../media/M_03292018202006_00000000U2940605_1_001-1.MP4”导入myVideo
类视频扩展组件{
渲染（）{
返回(
)
}
}
```

使用（短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 React，{Component}来自“React”
从“react player”导入react player
类视频扩展组件{
渲染（）{
返回(
)
}
}
导出默认视频；

您必须创建视频对象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]));
};

---

主要捕获项：所有静态数据都应放在公用文件夹中。 任何视频、音频、图像等

为什么？
公用文件夹将不由Web pack处理，因此保持不变，您可以看到它的原样。 将其放在任何其他地方都会被Webpack处理、调整和优化，因此可能会更改视频文件的压缩或扩展，从而导致对代码进行不正确的解析（虽然图像中看不到，但视频会受到影响）

如何从代码访问公用文件夹？
每个文件url都指向公用文件夹。每个带有

/

的文件url都指向文件目录。
要访问

public/video1.mp4

只需编写

url='video1.mp4'

例如

感谢您的解决方案！我试着像你刚才说的那样导入它，但当使用npm start运行时，它只会给我一个黑色背景。你知道这是为什么吗？我的导入链接只是一个例子，所以你需要从文件夹中的位置导入文件。如果它不工作，mp4格式可能有问题。（假设您正在使用Create React应用程序）非常感谢！工作得很好。非常感谢。您好，如何从特定文件夹路径播放视频，例如“E:\\video\\x.mp4”？我不想上传

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

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