title: Playing two videos in one Video element React
body: <p>I want to put a short intro video that plays before every video on my web app. This fiddle: <a href="http://jsfiddle.net/bnzqkpza/" rel="nofollow noreferrer">http://jsfiddle.net/bnzqkpza/</a> has a lot of the functionality I'm looking for, but I am using React so I need to rewrite the jquery so it doesn't change the DOM. I'm new to React, can anyone help me with this? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>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();
  });
  </code></pre>