1つのビデオ要素で2つのビデオを再生する反応

Question

Webアプリケーションのすべてのビデオの前に再生する短いイントロビデオを挿入したいと思います。このフィドル：http://jsfiddle.net/bnzqkpza/には、私が探している機能がたくさんありますが、Reactを使用しているので、DOMを変更しないようにjqueryを書き直す必要があります。私は反動するのが初めてだ、誰もがこれで私を助けることができますか？

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

コードサンドボックスのURL：ビデオコンポーネントは次のようになります使用するように編集されたhttps://codesandbox.io/s/n7p9yvp260

Answer 2

は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