15

我目前正在尝试在 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;
4

4 回答 4

14

您必须创建视频对象 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} />
于 2020-05-11T03:13:10.740 回答
10

使用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;
于 2020-03-21T23:35:42.137 回答
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>
    )
  }
}

```
于 2020-03-21T23:15:08.350 回答
3

主要内容：所有静态文件都应放在公用文件夹中。任何视频、音频、图像等。

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

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

例如。

            <ReactPlayer playing url='video1.mp4'
                height='500px'
                width='800px'
                controls='true'
            />
于 2020-08-29T14:46:45.717 回答