title: How to change video source onclick?
body: <p>HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="source" id="source_one" onclick="chnageToSourceTwo()"&gt;
      Source 1
  &lt;/div&gt;
  &lt;video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}"&gt;
      &lt;source src="example_video_1.mp4" type='video/mp4' /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre class="lang-js prettyprint-override"><code>function chnageToSourceTwo() {
      document.getElementById("example_video_1").src="example_video_2.mp4";
  }
  </code></pre>
  
  <p>The video source is not changing after clicking on div. I am using the Video.js plugin to add video player to my webpage.</p>
  
  <p>Does anyone know how to change source of video onclick?</p>
  
  <p><strong>jsFiddle</strong>  <a href="http://jsfiddle.net/ah1fj7te/" rel="nofollow">http://jsfiddle.net/ah1fj7te/</a></p>