title: javascript with html <video> load() & play() function not firing
body: <p>I've been building a customised video player with HTML and I've run into a problem, I suspect it lies with my javascript, after toiling for hours trying to work it out I admit defeat.</p>
  
  <p>The problem is that my 'loadChapter()' function is running correctly from what I can see, but when fired a second time, the video.load() and video.play() methods seem to just stop working. </p>
  
  <p>I cannot include a link to the actual page due to disclosure agreements with the client, here is the censored code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="shell"&gt;
  
      &lt;div id="sidebar"&gt;
          &lt;div id="logo"&gt;
              &lt;a href="#"&gt;X&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;nav&gt;
              &lt;ul id="chapters"&gt;
                  &lt;li&gt;&lt;a href="X"&gt;1.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="X"&gt;2.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="X"&gt;3.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="X"&gt;4.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="X"&gt;5.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="X"&gt;6.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="X"&gt;7.&lt;span&gt;X&lt;/span&gt;&lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;div id="controls"&gt;
              &lt;div id="vidnav"&gt;
                  &lt;a id="prev" title="Previous Chapter" href="#"&gt;Prev&lt;/a&gt;
                  &lt;div&gt;
                      &lt;a id="play" title="Play Chapter" href="#" onclick="document.getElementById('video').play()" style="display:none;"&gt;Play&lt;/a&gt;
                      &lt;a id="pause" title="Pause Chapter" href="#" onclick="document.getElementById('video').pause()"&gt;Pause&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;a id="next" title="Next Chapter" href="#"&gt;Next&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div id="vidseek"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
          &lt;video id="video" autoplay="autoplay"&gt;
              &lt;source id="mp4" src="video/X.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
              &lt;source id="webm" src="video/X.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
              Your browser does not support HTML video.
          &lt;/video&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript (with jQuery):</p>
  
  <pre><code>$(document).ready(function(){
  
  var shell = "#shell";
  var objH = $(shell).outerHeight();
  
  autoMargins(shell);
  $(window).resize(function() {
      autoMargins(shell);
  });
  
  function autoMargins(obj){
      var winH = $(window).height();
      if (winH &gt;= objH ) {
          var topMargin = (winH/2) - (objH/2);
          $(obj).css('marginTop', topMargin);
      };
  };
  
  // GET VIDEO FILES
  var video = document.getElementById('video')
  var filepath = "video/";
  var chapters = new Array();
  var totalChapters = $('#chapters li').length;
  for( i=0; i &lt; totalChapters; i++ ) {
      chapters[i] = new Array();
      filename = $('#chapters li a:eq(' + i + ')').attr('href');
      for( j=0; j &lt; 3; j++ ) {
          chapters[i][0] = filepath + filename + ".png";
          chapters[i][1] = filepath + filename + ".mp4";
          chapters[i][2] = filepath + filename + ".webm";
      };
  };
  
  // CHAPTER CONTROLS
  var currentChapter = 0;
  $('#chapters li a').click(function(e) {
      e.preventDefault();
      currentChapter = $(this).parent().index();
      loadChapter(currentChapter);
  });
  
  
  var mp4 = document.getElementById("mp4");
  var webm = document.getElementById("webm");
  
  function loadChapter(i) {
      $('#video').attr('poster', chapters[i][0]);
      mp4.setAttribute("src", chapters[i][1]);
      webm.setAttribute("src", chapters[i][2]);
  
      video.load();
      video.play();
  };
  
  $('#play').click(function(e) {
      e.preventDefault();
      $('#play').toggle();
      $('#pause').toggle();
  });
  
  $('#pause').click(function(e) {
      e.preventDefault();
      $('#play').toggle();
      $('#pause').toggle();
  });
  
  $('#next').click(function(e) {
      e.preventDefault();
      if (currentChapter &lt; totalChapters ) {
          currentChapter++;
          loadChapter(currentChapter);
      };
  });
  
  $('#prev').click(function(e) {
      e.preventDefault();
      if (currentChapter &gt;= 0 ) {
          currentChapter--;
          loadChapter(currentChapter);
      };
  });
  </code></pre>
  
  <p>});</p>
  
  <p>The 'poster' for the video tag and the markup in the dom is all loading correctly via the loadChapter() script, but I'm having a hard time figuring out why the video will only load and play once.</p>
  
  <p>Is there something I'm missing here?</p>