Question

我想在我的网络应用上播放每个视频之前播放的简短介绍视频。这个小提琴：http://jsfiddle.net/bnzqkpza/有很多我正在寻找的功能，但是我使用React所以我需要重写jquery所以它不会改变DOM。我是React的新手，有人可以帮我吗？

HTML：

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

JS：

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

Answer 1

我在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
      />
    );
  }
}

代码沙箱网址：https://codesandbox.io/s/n7p9yvp260

Answer 2

编辑使用React 16示例。

您可以尝试这样的事情：

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

https://codepen.io/anon/pen/OOxmjJ?editors=0010

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

2 个答案: