javascript - 在 'click' 上重置 addClass 函数

Question

因此，我有一个功能可以使图像不可见，同时开始在其下方播放视频(6 个中的 1 个)。效果很好，div 淡出，然后开始播放。但是，它只在第一次起作用。

有六个拇指(都是列表中的一个元素)，它们每个都播放一个视频，对吗？因此，每次按下拇指时，我都需要图像恢复(快速)然后像它一样慢慢淡出。因此，每次点击都会进行一次迷你重置。

代码是

$(document).ready(function () {

    $('li, .thumbs').on('click', function () {


        var numb = $(this).index(),
            videos = [
                'images/talking1.m4v',
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];

        myVideo.load();
        $('#MyT').addClass('clear');
        myVideo.play();

    });

});

我试过洗牌，但没有骰子。而且，是的，它应该在视频加载完成后开始褪色。这是针对 iPad 的，我还没有找到更好的方法来解决视频加载时出现的闪烁问题。

编辑:好吧，试着用我能做的最好的方式来解释...... 页面加载，并且图像位于顶部。有六个缩略图，单击一个。图像在视频加载时淡出(不必同步，只要视频先完成加载)，然后播放。如果某个点按下另一个拇指，图像会弹回并淡出，以在视频加载时覆盖。基本上，第一次点击的条件会在每次点击时重复。

Answer 1

尝试以下方法检查视频何时结束:

$('#my_video_id').bind("ended", function(){ 
      alert('Video Ended'); 
      $('#MyT').removeClass('clear');
    });

取自http://help.videojs.com/discussions/questions/40-jquery-and-event-listeners

似乎对他们有用，所以如果您有类似的结果，请告诉我。

编辑

因此，当您的缩略图被点击时，您应该首先检查视频是否已经在播放，如评论部分的链接中所讨论的那样。如果正在播放视频，请停止该视频并将“清除”类添加回该视频。然后你可以继续淡入第二个视频。我显然不能为你写下所有这些，因为我不知道你拥有的所有条件、约束和 html 代码，但基本大纲就在那里。