在制作这个简单的jquery视频播放器时，我错过了什么

Question

我有两个视频，我在一个页面上显示。Onload，两个视频都是隐藏的，只显示一张海报。点击其中一个按钮，就会播放视频。哪个视频是由按钮中的一些嵌套(隐藏)数据决定的。

我将视频保存在一个变量中，像这样:

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>';

我的jquery是这样的

$('#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();
    });
});

上面的代码处理的第一个视频，我点击。我希望发生的是，如果我点击另一个按钮，它会清空电影容器并加载另一个视频-这不是情况。

你能看出问题所在吗?

我想这与"隐藏海报"有关。因为它第一次是隐藏的，第二次它没有fadeOut，所以它没有执行函数中的任何代码。是这样的吗?

编辑:

下面是该问题的工作示例http://jsfiddle.net/RrC2u/

Answer 1

问题是您的<div id="main-movie">元素没有正确关闭:

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

关闭它修复你的问题:

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

此处更新小提琴