React.js - react-player 如何播放本地视频答案

【问题标题】：React.js - react-player how to play local videoReact.js - react-player 如何播放本地视频
【发布时间】：2020-07-02 18:38:39
【问题描述】：

我目前正在尝试在 react.js 中的本地主机上播放视频。我正在使用 react-player 模块来创建视频播放器组件。我可以使用 youtube 和 facebook 链接等 url 播放视频，但我无法使用文件路径使用本地视频。我通读了 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;

【问题讨论】：

标签： javascript reactjs react-player

【解决方案1】：

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

【讨论】：

完美运行。谢谢！
您好，如何从特定文件夹路径播放视频，例如 "E:\\video\\x.mp4" ？我不想上传

【解决方案2】：

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

CRA 只会将文件复制到docs 中提到的最终静态页面。

如果您不使用 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;

【讨论】：

【解决方案3】：

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

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

```

【讨论】：

感谢您的解决方案！我试着像你刚才说的那样导入它，但是当它使用 npm start 运行时，它只是给了我一个黑色的背景。你知道这是为什么吗？
我的导入链接只是一个示例，因此您需要从文件夹中的位置导入文件。
如果不行，可能是mp4格式有问题。 github.com/facebook/create-react-app/issues/6822（假设您使用的是 Create React App）

【解决方案4】：

Main Catch：所有的静态文件都应该放在public 文件夹中。任何视频、音频、图像等。

为什么？
公共文件夹将不由 Web-pack 处理，因此保持不变，您可以按原样查看。将其放置在其他任何位置将由 webpack 处理、调整和优化，因此可能会更改视频文件的压缩或扩展，从而导致代码解析不正确（尽管在图像中看不到，但视频会受到影响）。

如何通过代码访问公用文件夹？
每个文件 url 都指向公共文件夹。每个带有./ 的文件网址都指向文件目录。
要访问public/video1.mp4，只需写url='video1.mp4'。

例如。

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

【讨论】：