Question

我有2个视频，我正在页面上显示。 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>';

我提出这个问题的方法是这样的：

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

更新了小提琴here。

在制作这个简单的jquery视频播放器时我缺少什么？

1 个答案: