Mediaelement,js Video player change source onclick.

hello,

I've been trying to get this video player to work, underneath the player i want image thumbnails which when clicked will load the multiple files in to video player then play (These will be square images need to be a/img tags)

I have managed to get the files to change over when the button is clicked but the player won't load.

can any one help me out? its the mediaelement.js video player.

HTML is

<video width="100%" height="100%" controls="controls" preload="none">
 <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
 <source type="video/mp4" id="mp4" src="#" />
 <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
 <source type="video/webm" id="webm" src="#" />
 <!-- Ogg/Vorbis for older Firefox and Opera versions -->
 <source type="video/ogg" id="ogv" src="#" />
 <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
 <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
  <param name="movie" value="flashmediaelement.swf" />
  <param name="flashvars" value="controls=true&file=myvideo.mp4" />
  <!-- Image as a last resort -->
  <img src="images/main-img.png" width="320" height="240" title="No video playback capabilities" />
  </object>
</video>

the links

<a href="#null" onclick="document.getElementById('mp4').src = 'movies/bigiam-trailer.mp4'; document.getElementById('webm').src = 'movies/bigiam-trailer.webm'; document.getElementById('ogv').src = 'movies/bigiam-trailer.ogv';">BIG I AM</a>
							
							<a href="#null" onclick="document.getElementById('mp4').src = 'movies/2.mp4'; document.getElementById('webm').src = 'movies/2.webm'; document.getElementById('ogv').src = 'movies/2.ogv';">CLIP 2</a>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="mediaplayer/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="mediaplayer/mediaelementplayer.css" />
	
	<script>
var player = new MediaElementPlayer('video', {
    defaultVideoWidth: 960,
    defaultVideoHeight: 410,
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'], 
    success: function (mediaElement, domObject) {}
});

// ... sometime later
function myFunction() {
    player.pause();
   document.getElementById('mp4').src = 'movies/bigiam-trailer.mp4';
   document.getElementById('webm').src = 'movies/bigiam-trailer.webm';
	player.load();
	player.play();
}
        
</script>

I think i am repeating my self, this will be on wordpress and will be using a custom field to upload the movie file so hence why i put the functions on the links so i can add the url for the video.

ideally i need it so i can insert the video url's in to the function on the link then when clicked, change source of video player and play the video.

can this be done? I don't really know anything about JS so any help would be appreciated or any other ways around it.