Reactjs 如何在react中播放视频

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

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

---

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

嘿，我想你的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>
  )

});

对于全屏，我可以建议你不要试图把事情复杂化，有一个很棒的库供玩家使用。

---

问题的完整功能代码

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;

---

Im使用react player，其中选项控件-设置为true或false以显示本机播放器控件。看看react播放器，它有你需要的一切

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

---

我试着在这里修改英文和格式，但我真的不明白数组视频列表的意思是什么，你能回顾一下，或者编辑一下，重新措辞吗？我猜你是想说你正在失去索引的踪迹。。。？

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