title: Reloading video.js player after changing source using jquery
body: <p>I manage to make a script where I can change the video source without reloading the whole page, but the problem is that after the new source is loaded, the player is not and I only get a black box.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"&gt;
  &lt;script src="//vjs.zencdn.net/4.12/video.js"&gt;&lt;/script&gt;
  &lt;video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'&gt;
    &lt;source id="videoMP4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /&gt;
  &lt;/video&gt;
  &lt;div class="menu1"&gt;menu1&lt;/div&gt;
  &lt;div class="menu2"&gt;menu2&lt;/div&gt;
  &lt;div class="menu3"&gt;menu3&lt;/div&gt;
  &lt;div class="menu4"&gt;menu4&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(".menu1").click(function() {
    document.getElementById("example_video_1").innerHTML = "&lt;source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/&gt;";
  });
  $(".menu2").click(function() {
    document.getElementById("example_video_1").innerHTML = "&lt;source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/&gt;";
  });
  $(".menu3").click(function() {
    document.getElementById("example_video_1").innerHTML = "&lt;source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/&gt;";
  });
  $(".menu4").click(function() {
    document.getElementById("example_video_1").innerHTML = "&lt;source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/&gt;";
  });
  </code></pre>
  
  <p>Full code and example: <a href="http://codepen.io/BeBeINC/pen/PqydVM" rel="noreferrer">http://codepen.io/BeBeINC/pen/PqydVM</a></p>