Question

我不确定这是否真的有意义......

抱歉，但我不知道如何说出来。问题在于我有一个播放数组功能。功能是

$("#myVid").bind("ended", function() {
            $("#MyT").fadeIn(250);
            function playArray(ele, array) {
                index++;
                if (index >= array.length) {
                    index = i;
                }
                ele.src = array[index];
                ele.load();
                ele.play();
            }
            playArray(document.getElementById("myVid"), videos);

基本上，当正在播放的视频结束时，它会播放阵列中的下一个视频。我们的想法是，您可以使用<li>标记来播放阵列中的任何视频。工作良好。

除非是你第二次点击。此时，点击“堆叠”，而不是播放下一个视频，它播放下一个视频后的视频。我该如何解决这个问题？

编辑：好的，这是js

$(window).load(function(){
        var index = 0;
        var videos = ['images/Answer1b.m4v', 'images/Answer2b.m4v', 'images/Answer3b.m4v', 'images/Answer4b.m4v', 'images/Answer5b.m4v', 'images/Answer6b.m4v'];
        $("#MyT").fadeOut();
$("li, .thumbs").bind("touchstart click", function() {
        $("#bigPic").removeClass("move");
        $("#MyT").fadeIn(0);
        });

$('li', '.thumbs').on('touchend click', function() {
    index = $(this).index();
    var myVideo = document.getElementById('myVid');
        myVideo.src = videos[index];
        myVideo.load();
        myVideo.play();


        $("#myVid").bind("loadeddata", function() {
        $("#bigPic").addClass("move");
        $("#MyT").fadeOut(750);
        });

    $("#myVid").bind("playing", function() {
        ("#bigPic").removeClass("move");
        $("#MyT").fadeOut(750);
        });

        $("#myVid").bind("ended", function() {
            $("#bigPic").removeClass("move");
            $("#MyT").fadeIn(250);
            function playArray(ele, array) {
                index++;
                if (index   >= array.length) {
                    index = 1;
                }
                ele.src = array[index];
                ele.load();
                ele.play();
            }
            playArray(document.getElementById("myVid"), videos);
        });
    });
    video.on("timeupdate", function() {
        var currentPos = myVid.currentTime;
        var maxduration = myVid.duration;
        var perc = 100 * currentPos / maxduration;
        $(".timeBar").css("width",perc+"%");    
    });
    var updatebar = function(x) {
        var progress = $(".progress");
        var maxduration = myVid.duration;
        var percentage = 100 * position / progress.width();
        if(percentage > 100) {
            percentage = 100;}
        if(percentage < 0) {
            percentage = 0;}
        $(".timeBar").css("width",percentage+"%");  
        myVid.currentTime = maxduration * percentage / 100;
    };
});

我点击两次（touchstart和touchend）就会受到影响，因为如果没有这样设置就会干扰......

Answer 1

继续我最初的评论：

单击时，将索引值减1

尝试在jquery $（document）.ready function：

中添加它

/*Target you play button click function here*/
$("#play-button").click(function(){
    index--;
});

Answer 2

通过使用两个不同的播放功能解决它。

单击

时会调用一个

$('li', '.thumbs').bind('touchend click', function() {
        $("#myVid").bind("loadeddata", function() {
        $("#bigPic").addClass("move");
        $("#MyT").fadeOut(750);
                });
        playVideo2( $(this).index() );
        });

和视频结束时的另一个

$("#myVid").bind("ended", function() {
    //stuff happens
 playVideo( (currentVideo + 1) % videos.length );
        });

除了索引

之外，两个函数是相同的

function playVideo(videoNumToPlay) {
            var myVideo = document.getElementById('myVid');
             myVideo.src = videos[videoNumToPlay];
             myVideo.load();
             myVideo.play();
             currentVideo = videoNumToPlay;
        }

        function playVideo2(index) {
            var myVideo = document.getElementById('myVid');
             myVideo.src = videos[index];
             myVideo.load();
             myVideo.play();
             currentVideo = index;
        }

哦，数组是在document.ready下设置的，而不是在点击下，如此

var videos = ['images/intro01.m4v', 'images/intro02.m4v', 'images/intro3.m4v', 'images/talking1.m4v', 'images/chord.m4v', 'images/dizzy.mp4'],
        currentVideo;

播放下一个视频数组会在点击时添加索引的增量

2 个答案: