Reactjs 在一个视频元素中播放两个视频

我想在我的web应用程序上的每个视频之前播放一段简短的介绍视频。这个fiddle：有很多我想要的功能，但我使用的是React，所以我需要重写jquery，这样它就不会改变DOM。我是新手，有人能帮我吗

HTML:

---

我在CodeSandbox中创建了一个示例。视频组件的外观如下所示：

import React from "react";
import ReactDOM from "react-dom";

export default class Video extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      src: this.props.videos[0]
    };
  }

  componentDidMount() {
    let video = ReactDOM.findDOMNode(this);
    video.addEventListener("ended", e => {
      if (this.state.index < this.props.videos.length - 1) {
        let nextIndex = this.state.index + 1;
        this.setState({
          index: nextIndex,
          src: this.props.videos[nextIndex]
        });
      }
    });
    video.play();
  }
  componentDidUpdate(prevProps, prevState) {
    let video = ReactDOM.findDOMNode(this);
    video.play();
  }
  render() {
    return (
      <video
        src={this.state.src}
        controls
        autplay="true"
        playsinline
        muted
        crossorigin
      />
    );
  }
}

const urls = [
  "https://www.w3schools.com/html/mov_bbb.mp4", 
  "https://www.w3schools.com/html/movie.mp4"
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      currentUrlIdx: 0,
    }

    this.handleEnded = this.handleEnded.bind(this);
  }

  handleEnded(e) {
    const nextUrlIdx = (this.state.currentUrlIdx + 1) % urls.length
    this.setState({ currentUrlIdx: nextUrlIdx });
  }

  render() {
    return <div>
      <video src={urls[this.state.currentUrlIdx]} autoPlay onEnded={this.handleEnded}/>
    </div>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
导出默认类Video.Component{
建造师（道具）{
超级（道具）；
此.state={
索引：0，
src:this.props.videos[0]
};
}
componentDidMount（）{
让video=ReactDOM.findDOMNode（this）；
video.addEventListener（“结束”，e=>{
if（this.state.index

---

代码沙盒url:

编辑为使用React 16示例。

您可以尝试以下方法：

import React from "react";
import ReactDOM from "react-dom";

export default class Video extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      src: this.props.videos[0]
    };
  }

  componentDidMount() {
    let video = ReactDOM.findDOMNode(this);
    video.addEventListener("ended", e => {
      if (this.state.index < this.props.videos.length - 1) {
        let nextIndex = this.state.index + 1;
        this.setState({
          index: nextIndex,
          src: this.props.videos[nextIndex]
        });
      }
    });
    video.play();
  }
  componentDidUpdate(prevProps, prevState) {
    let video = ReactDOM.findDOMNode(this);
    video.play();
  }
  render() {
    return (
      <video
        src={this.state.src}
        controls
        autplay="true"
        playsinline
        muted
        crossorigin
      />
    );
  }
}

const urls = [
  "https://www.w3schools.com/html/mov_bbb.mp4", 
  "https://www.w3schools.com/html/movie.mp4"
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      currentUrlIdx: 0,
    }

    this.handleEnded = this.handleEnded.bind(this);
  }

  handleEnded(e) {
    const nextUrlIdx = (this.state.currentUrlIdx + 1) % urls.length
    this.setState({ currentUrlIdx: nextUrlIdx });
  }

  render() {
    return <div>
      <video src={urls[this.state.currentUrlIdx]} autoPlay onEnded={this.handleEnded}/>
    </div>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

const URL=[
"https://www.w3schools.com/html/mov_bbb.mp4", 
"https://www.w3schools.com/html/movie.mp4"
];
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
currentUrlIdx:0，
}
this.handleEnded=this.handleEnded.bind（this）；
}
处理（e）{
const nextUrlIdx=（this.state.currentUrlIdx+1）%urls.length
this.setState（{currentUrlIdx:nextUrlIdx}）；
}
render（）{
返回
;
}
}
ReactDOM.render(
这些DOM节点具体做什么？我有类似的方法，将索引作为状态变量。因为我不需要视频循环，所以在索引0视频结束后，我在endHandler方法中将索引设置为1。我正在打印结果，并且我的状态变量成功地更改为1，但索引0视频保持回放其他在线网站说this.setState应该重新呈现html，但我的情况似乎不是这样。我没有任何对getDOMNode或VideoDomNode的调用。我只是编辑了我的答案。我意识到我用于示例的代码笔使用了React的一个古老版本，这解释了为什么我使用了React预期工作不起作用。在React 16中更简单，因为OneDed事件可以工作，并且您不必直接访问DOM。谢谢，这个解决方案正是我想要的。不幸的是，在我当前的视频中，我有许多调用this.id的处理函数。希望我可以调整它。@Waduhek我不确定我是否理解它根据您的要求。您可以将此
视频
组件放入任何其他React组件中。如果您希望首先加载特定视频，请将该视频作为阵列的第一项。