title: jQuery and HTML5 video - change source onClick
body: <p>I have to create an interactive video using HTML5 and jQuery. My goal is to:</p>
  
  <ol>
  <li>Play <code>video1</code></li>
  <li>When <code>video1</code> ends show <code>button1</code>, <code>onClick</code> change to <code>video2</code> and hide <code>button1</code></li>
  <li>Play <code>video2</code></li>
  <li><code>On Ended</code> show <code>button 2</code>, <code>OnClick</code> change to <code>video 3</code></li>
  <li>and so on...</li>
  </ol>
  
  <p>My question to you is, what am I doing wrong?
  This is my code.</p>
  
  <pre><code>&lt;section&gt; 
  &lt;video autoplay="autoplay" controls="controls" onended="testEnded()"&gt;
      &lt;source id="srcWebm" src="media/Madagascar.webm"/&gt;
  &lt;/video&gt;
  &lt;/section&gt;
  
  &lt;section id="buttons" class="btnShow"&gt;
      &lt;ul id="buttons2" hidden&gt;
          &lt;li&gt;&lt;a href="#" id="choice1" onclick="changeSrc1()"&gt;VW&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p>The function <code>testEnded()</code> is in an external sheet (which is linked properly to the html).
  The script is as follows:</p>
  
  <pre><code>function changeSrc1() {
      $('#srcWebm').attr('src','media/VW.webm');
  
  }
  
  function testEnded() {
          $('#buttons2').removeAttr('hidden');
      }
  </code></pre>
  
  <p>When I execute <code>changeSrc1()</code> nothing happens. I have tried linting the code - no errors...</p>
  
  <p>What should I do?
  Thanks!</p>