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

Question

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

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

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