Changing the video source.

So, I am not completely sure if this should be categorized as a support request or a feature request -- so please correct me if needed.

I have spent some time over the past week or so researching different ways to load a new html-5 video source into the same player. I want to avoid creating a seperate module, because I have a gut feeling that this can easily be accomplished with jquery or js. I found one method that I tested on a dummy site using the video tag without the js module implemented.

In my external js file...

function watchMore(video) {
				// Remove Old Video
				var x = document.getElementById('vid');
				document.getElementById('video').removeChild(x);
 
				// Create Elements for New Video
				var v = document.createElement('video');
				var mp4 = document.createElement('source');
				var webm = document.createElement('source');
				var ogv = document.createElement('source');
				var f = document.createElement('object');
				var p1 = document.createElement('param');
				var p2 = document.createElement('param');
 
				// Populate New Elements
				v.id = 'vid'; v.width = '544'; v.height = '304'; v.controls = true;
				mp4.id = 'mp4'; mp4.src = 'files/videos/' + video + '.mp4'; mp4.type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
				webm.id = 'webm'; webm.src = 'files/videos/' + video + '.webm'; webm.type = 'video/webm; codecs="vp8, vorbis"';
				ogv.id = 'ogv'; ogv.src = 'files/videos/' + video + '.ogv'; ogv.type = 'video/ogg; codecs="theora, vorbis"';
				f.id = 'flash'; f.width = '544'; f.height = '304'; f.type='application/x-shockwave-flash'; f.data='http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf';
				p1.name='movie'; p1.value='http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf';
				p2.name='flashvars'; p2.value='controlbar=over&file=videos/' + video + '.mp4';
 
				// Append New Elements
				f.appendChild(p1); f.appendChild(p2);
				v.appendChild(mp4); v.appendChild(webm); v.appendChild(ogv); v.appendChild(f);
				document.getElementById('video').appendChild(v);
 
				// Play Video
				v.play();
				return true;
			}

In my HTML...

<img src='mybutton.png' onclick='watchMore("Video1");'>
<img src='mybutton.png' onclick='watchMore("Video2");'>
<img src='mybutton.png' onclick='watchMore("Video3");'>

Now, the trouble with this method is that the VideoJS module creates numbered IDs for the divs & the videos inside of them. For example, when inspecting the video I want to swap out on a particular page, I find that the div id is videojs-31-field-upload-video, and the ID of the video inside is videojs-31-field-upload-video-video. When testing the method above with that very specific video ID, the function will only work once, because the video contained inside will no longer have that ID. Also, it doesn't adapt the controls of the VideoJS player. I am curious to know if there is a simpler means of accomplishing this task, or if there is a way I can change the IDs being given to the videos.