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

Question

我目前正在尝试在 react.js 中在本地主机上播放视频。我正在使用 react-player 模块创建视频播放器组件。我可以使用 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;

Answer 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} />

Answer 2

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

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

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

例如。

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

Answer 3

使用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;

Answer 4

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

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

```