Safari & Chrome time-rail issue

I’ve got 4 players on one page and I’m hiding/showing them by clicking on
li’s.
This works perfectly in Firefox, but in Safari & Chrome I have to click twice for my entire jQuery function to work properly and the time-rail is missing on all of the players.
URL: here
jQuery code is as follows:

$('.12hours').click(function() {
		if (!$(this).hasClass('xmas-select')) {
			$('audio')[0].player.play();
			$('#wp_mep_1')[0].player.setCurrentTime(0);
			$('#xmas-nav ul li').removeClass('xmas-select');$(this).addClass('xmas-select');
			$('#air, #magic, #country').fadeOut(50);
			$('#content-xmas, #12hours').delay(100).fadeIn(400);
			}

});	

	$('.magic').click(function() {
		if (!$(this).hasClass('xmas-select')) {
			$('audio')[3].player.play();
			$('#wp_mep_4')[0].player.setCurrentTime(0);
			$('#xmas-nav ul li').removeClass('xmas-select');$(this).addClass('xmas-select');
			$('#air, #12hours, #country').fadeOut(50);
			$('#content-xmas, #magic').delay(100).fadeIn(400);
			}
});

	$('.air').click(function() {
		if (!$(this).hasClass('xmas-select')) {
			$('audio')[2].player.play();
			$('#wp_mep_3')[0].player.setCurrentTime(0);
			$('#xmas-nav ul li').removeClass('xmas-select');$(this).addClass('xmas-select');
			$('#magic, #12hours, #country').fadeOut(50);
			$('#content-xmas, #air').delay(100).fadeIn(400);
			}
});

	$('.country').click(function() {
		if (!$(this).hasClass('xmas-select')) {
			$('audio')[1].player.play();
			$('#wp_mep_2')[0].player.setCurrentTime(0);
			$('#xmas-nav ul li').removeClass('xmas-select');$(this).addClass('xmas-select');
			$('#magic, #12hours, #air').fadeOut(50);
			$('#content-xmas, #country').delay(100).fadeIn(400);
			}
});

http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/