What am I missing in making this simple jquery video player work?

I have 2 videos that I'm displaying on a page. Onload, both videos are hidden and simply a poster is shown. On clicking one of the buttons, a video is played. Which video is determined by some nested (hidden) data in the button.

I'm holding my videos in a variable like so:

var video_1 = '<video width="840" height="472" controls autoplay class="video_1">' +
   '<source src="/mov/video1.mp4"  type="video/mp4"  />' + 
   '<source src="/mov/video1.webm" type="video/webm" /></video>';

var video_2 = '<video width="840" height="472" controls autoplay class="video_2">' +
    '<source src="/mov/video2.mp4"  type="video/mp4"  />' +
    '<source src="/mov/video2.webm" type="video/webm" /></video>';

And my jquery to bring this up is like so:

$('#video_selection_wrap .play_wrap').live('click',function(){
    // get the nested data from the button
    var video = $(this).children('.data').text();

    // hide the poster
    $('.poster').fadeOut(function(){
        $('#main-movie').empty();
        switch(video) {
            case 'video_1':
                video_play = video_1;
            break;
            case 'video_2':
                video_play = video_2;
            break;
        }

        // load the appropriate video_play into the movie box
        $('#main-movie').html(video_play).show();
    });
});
开发者_如何学JAVA

The above code works a treat for the first video I click. What I was hoping would happen however was that if I clicked on another button, it would empty the movie container and load the other video - this isn't the case.

Can you see the problem?

I'm thinking it has something to do with the 'hide the poster' bit. Because its hidden the first time, the second time it doesn't fadeOut, and so it doesn't execute any of the code within its function. Is that how it works?

Edit: Here is a working jsfiddle of the problem http://jsfiddle.net/RrC2u/

The problem is that your <div id="main-movie"> element is not properly closed:

<div id="movie-selection-wrap">
    <div id="main-movie">        <!-- not closed -->
    <div class="poster"></div>
</div>

Closing it fixes your issue:

<div id="movie-selection-wrap">
    <div id="main-movie"></div>
    <div class="poster"></div>
</div>

Updated fiddle here.