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代码，但基本的大纲就在那里。

在'click'上重置addClass函数

1 个答案: