Video player won't play on src change unless already playing

Question

I have a video player with thumbnails. I want the video player to start playing the video selected. However, it won't work unless the video is already playing. So I need to hit the play button first, then hit the thumbnail for it to star. If the page loads and I hit the thumbnail, it won't play.

This is my site: http://www3.carleton.ca/clubs/sissa/html5/video.html

HTML:

<div id="playlist" class="animated fadeInRight">
    <div class="thumb" id="tb1"><img src="images/thumbnails/TbGow.jpg" onClick="changeTrailer('media/vGow')"/></div>
    <div class="thumb" id="tb2"><img src="images/thumbnails/TbLast.jpg" onClick="changeTrailer('media/vLast')"/></div>
    <div class="thumb" id="tb3"><img src="images/thumbnails/TbTwo.jpg" onClick="changeTrailer('media/vTwo')"/></div>
</div>

JS:

function changeTrailer(source){ 
    playlist = document.getElementById('playlist');
    var source1 = media.children[0]; 
    var source2 = media.children[1]; 
    source1.src = source+'.mp4'; 
    source2.src = source+'.webm'; 

    media.load(); 
    //Reseting control bar elements 
    window.clearInterval(updateBar);
    media.play(); //call play function so it resets timer
    dimScreen();
    playButton.firstChild.src = "images/icons/pause.png";
    updateBar=setInterval(update, 100);
    playlist.style.opacity = '0';
}
function playPause(){
    if (!media.paused) { // if currently playing (or ended?)
        if (media.ended) { // if at the end
            media.currentTime = 0; // go to start 
            lightScreen();
        } else { // else
            media.pause(); // pause
            playButton.firstChild.src = "images/icons/play.png";
            window.clearInterval(updateBar);
            lightScreen();
            return; // and end function here
        }
    } // then if function didn't end
    media.play(); // resume playing
    dimScreen();
    playButton.firstChild.src = "images/icons/pause.png";
    updateBar=setInterval(update, 100);
}

Answer 1

Try to change window.clearIntreval(updateBar) into if ( typeof updateBar !== 'undefined' && updateBar ) window.clearInterval(updateBar); .