title: Replacing HTML5 video src strings in javascript does not replace video
body: <p>I'm a javascript novice building a simple page to practice using HTML5 video. It's basically a full-page looping video and a javascript timer that tracks and updates time on page. (Inspired, of course, by <a href="http://drunkronswanson.com/" rel="nofollow noreferrer">Infinite Drunk Ron Swanson</a>). Here is a <a href="http://ecmendenhall.github.com/Infinite-Charleston" rel="nofollow noreferrer">live version</a> of the page. Be careful: both links play sound.</p>
  
  <p>I'd like the script to select one of seven videos to play on page load. The code should choose a random integer between 1 and 7, generate strings to the appropriate files in a "media/" directory, and replace the video <code>&lt;source&gt;</code> tag's <code>src</code> attribute with the new string.</p>
  
  <p>This all seems to be working correctly: there are no errors in the console, locally or as uploaded to github-pages, and when I inspect the <code>&lt;video&gt;</code> element in the Chrome developer toolbar, I can see that the code is replacing the <code>src</code> strings correctly. But the page doesn't seem to load different videos! This is extra-aggravating, as it was working correctly a few commits ago. I've gone back through the history to see what's changed, but I can't find anything.</p>
  
  <p>I come from Python, and I suspect there's something I just don't get yet, but I don't know enough to figure out what!</p>
  
  <p><strong>UPDATE:</strong> I have solved this problem with the help of <a href="https://stackoverflow.com/questions/7192098/adding-sources-to-html5-video-in-javascript">this question</a>, by using <code>createElement</code> and <code>appendChild</code> to insert the source tags instead of changing the attributes of each element in the <code>NodeList</code> returned by <code>querySelectorAll</code>. Here is the relevant new code:  </p>
  
  <pre><code>function add_source(element, src, type) {
      var source = document.createElement("source");
      source.src = src;
      source.type = type;
      element.appendChild(source);
      }
  
  function main() {
      var video_no = random_int(1,7);
      var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4";
      var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm";
      var videoplayer = document.querySelector(".videoplayer");
      add_source(videoplayer, video_string_mpeg, "video/mp4");
      add_source(videoplayer, video_string_mpeg, "video/webm");
      get_seconds();
      }
  </code></pre>
  
  <p>This is great, but I don't completely understand why it worked. Explanations are still welcome!</p>
  
  <p>Here's the javascript:</p>
  
  <pre><code>start = new Date();
  start_time = start.getTime();
  
  function get_seconds() {
      var now = new Date();
      var time_now = now.getTime();
      var time_diff = time_now - start_time;
      var seconds = time_diff/1000;
      var timer_string = Math.round(seconds);
      document.getElementById("timer").innerHTML = timer_string;
      window.setTimeout("get_seconds();", 1000);
      }
  
  function random_int(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min; }
  
  
  function main() {
      var video_no = random_int(1,7);
      var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4";
      var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm";
      var sources = document.querySelectorAll(".videoplayer source");
      sources.item(0).src = video_string_mpeg;
      sources.item(1).src = video_string_webm;
      get_seconds();
      }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;link rel="stylesheet" href="charleston.css"&gt;
  &lt;script src="charleston.js" type="text/javascript"&gt;
  &lt;/script&gt;
  
  &lt;body onload="main();"&gt;
  &lt;video class="videoplayer" loop autoplay&gt;
  &lt;source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.mp4" type="video/mp4" /&gt;
  &lt;source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.webm" type="video/webm" /&gt;
  Christ on a cracker, Trudy! Update your web browser!
  &lt;audio loop autoplay&gt;
  &lt;source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.mp3" type="audio/mpeg" /&gt;
  &lt;source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.ogg" type="audio/ogg" /&gt;
  &lt;/audio&gt;
  &lt;/video&gt;
  &lt;div class="timer_box"&gt;
  &lt;p&gt;Hell's bells, Trudy! You've been dancing for &lt;a id="timer"&gt;0&lt;/a&gt; seconds.
  &lt;a href="https://twitter.com/share" class="twitter-share-button" data-count="none"&gt;Tweet&lt;/a&gt;
  &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't think the CSS or media files are the problem, but you can see them in the <a href="https://github.com/ecmendenhall/Infinite-Charleston/tree/gh-pages" rel="nofollow noreferrer">project repository</a> if you'd like. A live version is available <a href="http://ecmendenhall.github.com/Infinite-Charleston/" rel="nofollow noreferrer">here</a>. (NB: It plays sound). As you can see, it does everything right except selecting different videos.</p>