Hi,
I'm a noob, hardly can do html, not css or php or javascript. Have to use a wysiwyg editor, etc.

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.
i.e. this pic illustrates it:


I have spend a lot of hours trying to find out how to do this but most answers are relative with no example, someone posts a portion of what they have tried but and answer only addresses what is broken. No sample example. As a noob, an example that works is worth a lot.

I came across this page, which seems to have the answer, but I tried it and it didn't work. Following the example, I pasted the css & javascript in the <head> and the necessary html in the body. I updated I think all the references to my urls and tried to keep file names the same as the example for testing.
Below is what I tried.

If someone can 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.
Code:
<html>
	<head>
		<title></title>
		<style media="screen" type="text/css">
.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 }
		</style>
<script>
$("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();
</script>	</head>
	
<body>
		<section class="container wrap">
  <video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://mywebsite.net/videos/testvid_01.png" data-setup="{}">  
    <source src=""  type="video/mp4">
    <source src=""  type="video/ogg">
    <source src=""  type="video/webm">
  </video>
</section>

<div class="wrap">
  <input rel="01" type="button" value="load video 1">
  <input rel="02" type="button" value="load video 2">
  <input rel="03" type="button" value="load video 3">
</div>
The preload image for the 1st video loads but no video, error is
"No video with supported format and MIME type found"

not sure even if this script will do what I want?

Help is greatly appreciated.