播放下一个视频数组为点击添加索引的增量答案

【问题标题】：play next for video array adds increment for index on click播放下一个视频数组为点击添加索引的增量
【发布时间】：2012-05-25 07:21:32
【问题描述】：

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

对不起，但我不知道该怎么说。问题在于我有一个播放数组功能。功能是

$("#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），因为如果不这样设置它们会干扰...

【问题讨论】：

当有点击时，索引值减1。
@JoshuaKissoon 我该怎么做？（对不起，数组不是我的强项）
我想不出太多，我只能推测，在 index = $(this).index();你抓住视频的索引，然后在 playArray 函数中的几行之后你就有了 index++；这可能会导致双倍增量，从而导致视频中的跳过
@JoshuaKissoon 我之前尝试过，但无济于事。非常感谢您查看任何一种方式；）

标签： jquery arrays html video

【解决方案1】：

继续我最初的评论：

当有点击时，索引值减1

尝试在你的 jquery $(document).ready 函数中添加这个：

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

【讨论】：

哦，我确实尝试过，但我不能使用它，因为如果我让视频播放（并且只需单击一下），它会在进入第二个之前再次播放......除非我错过了什么？
嘿，我现在有点空白，你能再添加一些可能相关的sn-ps代码吗？或者只是添加播放视频所涉及的所有 JS
好的，js我已经加了，有时间可以看看，不胜感激！

【解决方案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;

【讨论】：