Блог

Главная - Вопросы по программированию - Как воспроизводить видео в react

Как воспроизводить видео в react

#reactjs

#reactjs

Вопрос:

У меня есть кнопка воспроизведения / паузы для каждого видео.

Когда я нажимаю на кнопку воспроизведения, всегда воспроизводится последнее видео, и значок меняется на всех видео. Я пытаюсь сделать это с помощью метода refs и play(), но каждый раз, независимо от того, какое видео пользователь выбирает, воспроизводится только последнее видео. Каждое событие щелчка воспроизводит последнее.

Кроме того, код для полноэкранного режима не работает. Это мой код:

 class Video extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      playing: false,
      videoList: [
        {
          src: 'https://clips.vorwaerts-gmbh.de/VfE_html5.mp4',
          type: "video/mp4"

        },
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        },
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        },
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        }
      ]
    }
  }
  onPlayPauseClick = (index) => (event) => {
    this.setState({
      playing: !this.state.playing
    });
    this.state.playing ? this.video.pause() : this.video.play();
  }

  //     onFullScreenClick = (video) => {
  //         this.setState({ video: video })
  //         if (video.requestFullscreen) {
  //             video.requestFullscreen();
  //         } else if (video.webkitRequestFullscreen) {
  //             video.webkitRequestFullscreen();
  //         } else if (video.mozRequestFullscreen) {
  //             video.mozRequestFullscreen();
  //         } else if (video.msRequestFullscreen) {
  //             video.msRequestFullscreen();

  //         }

  //     }
  renderList = () => {
    const { playing } = this.state;
    return this.state.videoList.map((item, index) => {
      return (
        <li key={`item_${index}`}>
          <video ref={(video) => { this.video = video; }} src={item.src}></video>
          <img
            src={playing ? "https://icon2.kisspng.com/20180419/pyq/kisspng-computer-icons-arrow-triangle-play-icon-5ad83452103159.1624767815241186100663.jpg" : "https://cdn2.iconfinder.com/data/icons/flat-and-simple-pack-2/512/1_Control_pause-512.png"}
            className="play"
            onClick={this.onPlayPauseClick(index)}
          />
          <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_fullscreen_exit_48px-512.png" className="full" />
        </li>
      )

    });
  }
  render() {
    return (
      <div>
        <ul>
          {this.renderList()}
        </ul>
      </div>
    );
  }
}

class Buttons extends React.Component {
  render() {
    return (
      <div>
        <Video />

      </div>
    );
  }
}

ReactDOM.render(<Video />, document.getElementById('app'));

Ответ №1:

Это произошло потому, что вы сохранили последний элемент видео this.video после перебора videoList элементов массива . Попробуйте сохранить ссылку this['video_' index]=video вместо this.video=video и начните играть с кодом this['video_' index].play()

Комментарии:

1. Я попытался исправить английский и форматирование здесь, но я действительно не понимаю, что «после каждого массива videoList должен означать, не могли бы вы просмотреть и, возможно, отредактировать, чтобы перефразировать? Я думаю, вы пытаетесь сказать, что теряете отслеживание индекса …?

Ответ №2:

Эй, я думаю, вы перепутали свою ссылку, вы можете создать новый массив ссылок и использовать его с индексом

 constructor () {
  this.ref = [];
}

и в ответ сделайте что-то вроде этого

 return this.state.videoList.map((item, index) => {
  return (
    <li key={`item_${index}`}>
      <video ref={(video) => { this.ref.push(video) }} src={item.src}></video>
      <img
        src={playing ? "https://icon2.kisspng.com/20180419/pyq/kisspng-computer-icons-arrow-triangle-play-icon-5ad83452103159.1624767815241186100663.jpg" : "https://cdn2.iconfinder.com/data/icons/flat-and-simple-pack-2/512/1_Control_pause-512.png"}
        className="play"
        onClick={this.onPlayPauseClick(index)}
      />
      <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_fullscreen_exit_48px-512.png" className="full" />
    </li>
  )

});

и затем вы можете вызвать свой ref внутри метода воспроизведения паузы

 onPlayPauseClick = (index) => (event) => {
    this.setState({
      playing: !this.state.playing
    });
    this.state.playing ? this.ref[index].pause() : this.ref[index].play();
  }

Для полноэкранного режима я могу предложить вам не пытаться усложнять ситуацию, есть потрясающая библиотека для плеера, которую вы можете использовать.
https://www.npmjs.com/package/react-player

Ответ №3:

Полный функциональный код для вашего вопроса.

 import React from "react";

class Video extends React.Component {
  constructor(props) {
    super(props);
    this.video = [];
    this.state = {
      playing: [false, false, false, false],
      videoList: [
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        },
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        },
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        },
        {
          src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
          type: "video/mp4"
        }
      ]
    };
  }
  onPlayPauseClick = index => event => {
    this.setState(state => {
      state.playing = !state.playing;
      state.playing ? this.video[index].play() : this.video[index].pause();
      return state.playing[index];
    });
  };

  onFullScreenClick = index => event => {
    let video = this.video[index];
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    } else if (video.mozRequestFullscreen) {
      video.mozRequestFullscreen();
    } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
    }
  };
  renderList = () => {
    const { playing } = this.state;
    return this.state.videoList.map((item, index) => {
      return (
        <li key={`item_${index}`}>
          <video
            ref={video => {
              this.video[index] = video;
            }}
            src={item.src}
          />
          <img
            src={
              playing
                ? "https://icon2.kisspng.com/20180419/pyq/kisspng-computer-icons-arrow-triangle-play-icon-5ad83452103159.1624767815241186100663.jpg"
                : "https://cdn2.iconfinder.com/data/icons/flat-and-simple-pack-2/512/1_Control_pause-512.png"
            }
            className="play"
            onClick={this.onPlayPauseClick(index)}
          />
          <img
            src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_fullscreen_exit_48px-512.png"
            className="full"
            onClick={this.onFullScreenClick(index)}
          />
        </li>
      );
    });
  };
  render() {
    return (
      <div>
        <ul>{this.renderList()}</ul>
      </div>
    );
  }
}

export default Video;

Ответ №4:

Я использую react-player, где опция «controls» — устанавливается в true или false для отображения собственных элементов управления плеером. посмотрите на «react-player», в нем есть все, что вам нужно

 <ReactPlayer url={'url/to/video'} className={classes.styleView} controls/>