title: I found how to change the video source (src) of an html5 source tag but am getting different results inside a function or with inline javascript
body: <p>Javascript to change the src of a  tag works inline, but when I try to embed the exact same code in a function call or within an "onclick" call of a button tag, noting happens. No error messages are thrown. </p>
  
  <p>What am I missing? </p>
  
  <p>Here is the code:</p>
  
  <pre><code> &lt;div style="width: 100%; height: 250px; overflow: hidden;"&gt;
    &lt;video id="video" width="100%" loop autoplay controls&gt;
    &lt;source id="videoSource" src="video1.m4v" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;
  &lt;/div&gt;
  
  &lt;script language="Javascript"&gt;
      document.getElementById('video').volume=0;
     // uncommented, the next line works, changing the video src to a new URL     
     // document.getElementById('videoSource').src = "video2.m4v";
      function changevideo() { 
          alert("Changing Video");
      // but embedded in a function or called from a button onclick, does not work
      document.getElementById('videoSource').src = "video2.m4v";
      }       
  &lt;/script&gt;
  
  &lt;div&gt;
   &lt;button onclick="javascript: changevideo()"&gt;Change Movie&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tested on Safari and Chrome on a Mac with same results. Thanks for any help! </p>