0

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

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

$("#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）中绑定了一些东西，因为如果不这样设置它们就会干扰......

4

2 回答 2

0

继续我最初的评论：

有点击时，索引值减1

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

/*Target you play button click function here*/
$("#play-button").click(function(){
    index--;
});
于 2012-05-22T03:00:27.250 回答
0

通过使用两种不同的播放功能解决了这个问题。

单击时会调用一个

$('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在click下而不是下设置的，像这样

var videos = ['images/intro01.m4v', 'images/intro02.m4v', 'images/intro3.m4v', 'images/talking1.m4v', 'images/chord.m4v', 'images/dizzy.mp4'],
        currentVideo;
于 2012-05-24T23:21:32.703 回答