title: video.js - update video source when clicking on a link
body: <p>I am trying to have a page with embedded video that dynamically will change the source when a link below the video frame is clicked. The source videos are on my host server.
  i.e. this pic illustrates it:</p>
  
  <p>![sample of page][1]</p>
  
  <p>I came across <a href="http://jsfiddle.net/swinginsam/NWbUG/">this page</a>, which seems to have the answer, but I tried it and it didn't work.  Following the example, I pasted the css &amp; javascript in the  and the necessary html in the body.  I updated all the references to my urls and tried to keep file names the same as the example for testing.
  Below is what I tried.  </p>
  
  <p>Can someone point out my errors, or provide a more elegant way of doing this?  Basically dynamically change embedded video when link is clicked and the video work in all the typical browsers, and most devices.
  This is for a wordpress site, <strike>using JW Player for wordpress</strike>, (my error) instead I found this script/code is actually for <a href="http://www.videojs.com/">Video.js</a></p>
  
  <p>It loads the pre image but doesn't play.</p>
  
  <p>As a test I tried this and it does play single video properly:</p>
  
  <pre><code>&lt;video id="testvideo" class="video-js vjs-default-skin" width="440" height="300"     controls="controls"&gt;
                &lt;source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/&gt;
                &lt;source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/&gt;
                &lt;source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p><strong>The javascript version for multiple source links</strong></p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;style media="screen" type="text/css"&gt;
  .wrap            { margin:30px auto 10px; text-align:center }
  .container       { width:440px; height:300px; border:5px solid #ccc }
  p                { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
          &lt;/style&gt;
  &lt;script&gt;
  $("input[type=button]").click(function() {
      var $target         = "testvid_"+$(this).attr("rel");
      var $content_path   = "http://www.mywebsite.net/videos/";  
      var $vid_obj        = _V_("div_video");
  
      // hide the current loaded poster
      $("img.vjs-poster").hide();
  
      $vid_obj.ready(function() {
        // hide the video UI
        $("#div_video_html5_api").hide();
        // and stop it from playing
        $vid_obj.pause();
        // assign the targeted videos to the source nodes
        $("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
        $("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
        $("video:nth-child(1)").attr("src",$content_path+$target+".webm");
        // replace the poster source
        $("img.vjs-poster").attr("src",$content_path+$target+".png").show();
        // reset the UI states
        $(".vjs-big-play-button").show();
        $("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
        // load the new sources
        $vid_obj.load();
        $("#div_video_html5_api").show();
      });
  });
  
  $("input[rel='01']").click();
  &lt;/script&gt;   &lt;/head&gt;
  
  &lt;body&gt;
          &lt;section class="container wrap"&gt;
    &lt;video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-
  
  setup="{}"&gt;  
      &lt;source src=""  type="video/mp4"&gt;
      &lt;source src=""  type="video/ogg"&gt;
      &lt;source src=""  type="video/webm"&gt;
    &lt;/video&gt;
  &lt;/section&gt;
  
  &lt;div class="wrap"&gt;
    &lt;input rel="01" type="button" value="load video 1"&gt;
    &lt;input rel="02" type="button" value="load video 2"&gt;
    &lt;input rel="03" type="button" value="load video 3"&gt;
  &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The preload image for the 1st video loads but no video, error is 
  "No video with supported format and MIME type found"</p>
  
  <p>So I added the source for the first video in this section</p>
  
  <pre><code>setup="{}"&gt;  
          &lt;source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4"  type="video/mp4"&gt;
          &lt;source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv"  type="video/ogg"&gt;
          &lt;source src="http://www.mywebsite.net/videos/videos/testvid_01.webm  type="video/webm"&gt;
        &lt;/video&gt;
  </code></pre>
  
  <p>Result the 1st video loads but not the other linked videos.</p>
  
  <p>names of the videos/png:
  testvid_01.mp4, testvid_01.ogv, testvid_01.webm, testvid_01.png
  testvid_02.mp4, testvid_02.ogv, testvid_02.webm, testvid_02.png
  testvid_03.mp4, testvid_03.ogv, testvid_03.webm, testvid_03.png</p>
  
  <p>I have tried this both in wordpress page and html page the results are the same.</p>
  
  <p>I'm not sure even if this script will do what I want?</p>