Question

每个视频都有一个播放/暂停按钮。

当我单击“播放”按钮时，总是播放最后一个视频，并且所有视频上的图标都会更改。我尝试使用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'));

Answer 1

之所以发生这种情况，是因为您在遍历this.video数组元素之后将最后一个视频项保存在videoList中。尝试将ref保存在this['video_'+index]=video中而不是this.video=video中，然后开始使用代码this['video_'+index].play()

播放

Answer 2

嘿，我认为您的ref搞砸了，您可以创建一个新的ref数组并将其与索引一起使用

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

});

然后您可以在播放暂停方法中调用您的裁判

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

Answer 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;

Answer 4

我使用react-player，其中选项“控件”-设置为true或false以显示本机播放器控件。看看“反应播放器”，它拥有您需要的一切

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

如何在React中播放视频

4 个答案: