React. js - реагирующий игрок, как воспроизводить локальное видео - PullRequest
Новая
       46

React. js - реагирующий игрок, как воспроизводить локальное видео

0 голосов
/ 22 марта 2020

Я сейчас пытаюсь воспроизвести видео на локальном хосте в ответ. js. Я использую модуль Reaction-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;

Ответы [ 3 ]

0 голосов
/ 22 марта 2020

С помощью Create React App (короткий CRA) вы можете поместить свои видеофайлы в папку publi c, например, в подпапку videos. Затем вы можете получить доступ к этому файлу stati c, как вы это делали в своем коде. enter image description here

CRA просто скопирует файлы на окончательную страницу c, как указано в документах .

Если вы не Чтобы использовать настройку CRA, необходимо скопировать видео в окончательный комплект, например, с помощью веб-пакета. 

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;
0 голосов
/ 11 мая 2020

Вы должны создать URL видеообъекта. 

import React, { useState } from "react"; 
import ReactPlayer from "react-player";

 const [videoFilePath, setVideoFileURL] = useState(null);


const handleVideoUpload = (event) => {
setVideoPath(URL.createObjectURL(event.target.files[0]));
};

.... 

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

... 

<ReactPlayer url={videoFilePath} width="100%" height="100%" controls={true} />
0 голосов
/ 22 марта 2020

Вам потребуется импортировать локальный видеофайл в ваш компонент. 

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

```
...