HTML 5 dynamic videos (not playlist) - Trying to simply the JS code into a an array - html5-video

Question

I have 8 videos that when clicked on their appropiate link they open a modal window - the video then plays. It work very well using the code i have created below however i am sure there must be a better way write this to reduce the JS code.
Guidence would be most welcomed.
- Have not found much on the forum, and nothing that solves this issue. (hence my code works but is very long). - thank you.
NOT WORKING IN IE8*
THE HTML PAGE WITH LINK
<div class="caption"><?php echo tep_image(DIR_IMAGES.'media/video_atr_cm.jpg','CM Computer','','','');?>
<div class="clearfix"></div>
<h5><?php echo ANIMATED_MEDIA ?></h5>
<h3>CM Computer</h3>
</div>
</a>
<div class="thumbnail-pad"><?php echo TEXT_BUTTON_READ_MORE?></div>
</div>
THE MODAL POPUP CONTAINER:
<!-- modal video -->
<div id="modal-gallery-video" class="modal modal-gallery hide fade" tabindex="-1">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<video id="video1" controls width="560" height="315">
<source id="mp4" src="" type="video/mp4" />
<source id="webm" src="" type="video/webm" />
<source id="ogg" src="" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="560" height="315">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="" />
</object>
</video>
</div>
<div class="modal-footer">
<a class="btn btn-success" onclick="playPause()"><i class="icon-play icon-white"></i> <span>Play/Pause</span> </a>
<a class="btn btn-info" onclick="makeSmall()"><span>Small</span></a>
<a class="btn btn-warning" onclick="makeNormal()"><span>Normal</span></a>
<a class="btn btn-info" onclick="makeBig()"><span>Big</span></a>
</div>
</div>
THE JQUERY:
$(function(){
var player = document.getElementById('video1');
var mp4Vid = document.getElementById('mp4');
var oggVid = document.getElementById('ogg');
var webmVid = document.getElementById('webm');
var swfVid = document.getElementById('swf');
document.getElementById('rockmetal').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/rockmetal.mp4");
$(oggVid).attr('src', "img/video/rockmetal.ogg");
$(webmVid).attr('src', "img/video/rockmetal.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxxx.com%2Ftest%2Fimg%2Fvideo%2Frockmetal.mp4");
player.load();
}
document.getElementById('jet').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/jet.mp4");
$(oggVid).attr('src', "img/video/jet.ogg");
$(webmVid).attr('src', "img/video/jet.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxx.com%2Ftest%2Fimg%2Fvideo%2Fjet.mp4");
player.load();
}
document.getElementById('flight').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/flight.mp4");
$(oggVid).attr('src', "img/video/flight.ogg");
$(webmVid).attr('src', "img/video/flight.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxx.com%2Ftest%2Fimg%2Fvideo%2Fflight.mp4");
player.load();
}
document.getElementById('heli').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/helicopter.mp4");
$(oggVid).attr('src', "img/video/helicopter.ogg");
$(webmVid).attr('src', "img/video/helicopter.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxxxx.com%2Ftest%2Fimg%2Fvideo%2Fhelicopter.mp4");
player.load();
}
document.getElementById('sub').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/sub.mp4");
$(oggVid).attr('src', "img/video/sub.ogg");
$(webmVid).attr('src', "img/video/sub.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxxxx.com%2Ftest%2Fimg%2Fvideo%2Fsub.mp4");
player.load();
}
document.getElementById('uav').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/uav.mp4");
$(oggVid).attr('src', "img/video/uav.ogg");
$(webmVid).attr('src', "img/video/uav.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxxxx.com%2Ftest%2Fimg%2Fvideo%2Fuav.mp4");
player.load();
}
document.getElementById('cm').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/intro.mp4");
$(oggVid).attr('src', "img/video/intro.ogg");
$(webmVid).attr('src', "img/video/intro.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxx.com%2Ftest%2Fimg%2Fvideo%2Fintro.mp4");
player.load();
}
document.getElementById('tank').onclick = function() {
player.pause();
$(mp4Vid).attr('src', "img/video/tank.mp4");
$(oggVid).attr('src', "img/video/tank.ogg");
$(webmVid).attr('src', "img/video/tank.webm");
$(swfVid).attr('value', "controlbar=over&file=http%3A%2F%2Fwww.xxxxxxx.com%2Ftest%2Fimg%2Fvideo%2Ftank.mp4");
player.load();
}
});

Answer 1

<script type="text/javascript">
var loading = document.getElementById('player');
$('ul#allvid li').on('click', function() {var lash = $(this).attr('id');
$("#player").html("<source src='img/video/"+lash+".mp4' type='video/mp4'/><source src='img/video/"+lash+".webm' type='video/webm'/><source src='img/video/"+lash+".ogg' type='video/ogg'/><object type='application/x-shockwave-flash' data='img/video/player.swf' width='560' height='315'><param name='movie' value='img/video/player.swf'/><param name='allowFullScreen' value='true'/><param name='wmode' value='transparent'/><param name='flashVars' value='controlbar=over&file=http%3A%2F%2Fwww.xxxx.com%2Fimg%2Fvideo%2F"+lash+".mp4'/></object>");player.pause();player.load();
});
</script>
<!-- modal video -->
<div id="modal-gallery-video" class="modal modal-gallery hide fade" tabindex="-1">
<div class="modal-header"> <a class="close" data-dismiss="modal">x</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<video id="player" controls width="560" height="315">
</video>
</div>
<div class="modal-footer"> <a class="btn btn-success" onclick="playPause()"><i class="icon-play"></i> <span>Play/Pause</span> </a> <a class="btn btn-info" onclick="makeSmall()"> <span>Small</span></a> <a class="btn btn-warning" onclick="makeNormal()"><span>Normal</span></a> <a class="btn btn-info" onclick="makeBig()"><span>Big</span></a></div>
</div>