1

当我单击<body>标签中的一个按钮时，它们都播放相同的视频，而不是应该播放的视频。这以前有效，但我找不到我改变的东西。有人可以指出吗？

脚本是

$("li, .thumbs").on('click', function() {   
        var numb = $(this).index(),
            videos = [" ", "http://homepage.mac.com/qt4web/A-chord.m4v",
            "images/intro01.m4v",
            "http://homepage.mac.com/qt4web/A-chord.m4v",
            "http://video-js.zencoder.com/oceans-clip.mp4",
            "images/clip2.m4v",
            "images/intro01.m4v",
            "images/clip2.m4v"],
            myVideo = document.getElementById("myVid");
            myVideo.src = videos[numb];
            myVideo.load();
            setTimeout(function(){
                myVideo.play();
                }, 200);

和 html 是

<ul class="thumbs">
              <div style="top:-128px;"><li rel="0"><img src="" alt="" width="280" height="128" /></li></div>  
              <div style="top:0px;"><li rel="1"><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:128px;"><li rel="2"><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:256px;"><li rel="3"><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:384px;"><li rel="4"><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:512px;"><li rel="5"><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:640px;"><li rel="6"><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
    </ul>

编辑：我非常抱歉这有多长，但我会发布脚本以防万一。阵列工作正常，直到某个时候，它可能在这里

$(document).ready(function () {
    var video = $("#myVid");    
    $("#MyT").fadeOut();
    video.on("loadedmetadata", function() {});
    $("li, .thumbs").bind("touchstart click", function() {
        $("#bigPic").removeClass("move");
        $("#MyT").fadeIn(0);});
        <!--$(".slider, .timeBar").fadeOut(0).fadeIn(0);
    $("li, .thumbs").on('click', function() {   
        var numb = $(this).index();
            videos = [" ", "http://homepage.mac.com/qt4web/A-chord.m4v",
            "images/intro01.m4v",
            "http://homepage.mac.com/qt4web/A-chord.m4v",
            "http://video-js.zencoder.com/oceans-clip.mp4",
            "images/clip2.m4v",
            "images/intro01.m4v",
            "images/clip2.m4v"];
            myVideo = document.getElementById("myVid");
            myVideo.src = videos[numb];
            myVideo.load();
            setTimeout(function(){
                myVideo.play();
                }, 200);            
    $("#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");       
    function playArray(index,ele,array,listener){
    ele.removeEventListener(listener||0);
    ele.src = array[index];
    ele.load();
    ele.play();
    index++;
    if(index>=array.length){
        index=i;
    }
    listener = ele.addEventListener('ended',function(){
        playArray(index,ele,array,listener);
    },false);
}
playArray(0,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");
        //calculate drag position
        //and update video currenttime
        //as well as progress bar
        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;};
});                 
});

$(function(){
  $("#content div:not(.slider)").bind('touchstart click', function() {
  $(".slider").animate({ top: $(this).offset().top, height: $(this).height() });
  });
  });

   $(function(){
$("#content div:not(.control)").bind('click', function() {
  // first, we hide .control, then do animation, then in the callback we do fadeIn
  $(".control").hide().animate({
    top: $(this).offset().top,
    height: $(this).height()
    }, function() {
       $(this).fadeIn();
    }
  );
});
});
4

2 回答 2

0

尝试：

$(".thumbs li").click( function() {
    var numb = $(this).attr("rel");

        videos = [" ", "http://homepage.mac.com/qt4web/A-chord.m4v",
        "images/intro01.m4v",
        "http://homepage.mac.com/qt4web/A-chord.m4v",
        "http://video-js.zencoder.com/oceans-clip.mp4",
        "images/clip2.m4v",
        "images/intro01.m4v",
        "images/clip2.m4v"];
        myVideo = $("#myVid");
        myVideo.src = videos[numb];
        myVideo.load();
        setTimeout(function(){
            myVideo.play();
            }, 200);
});
于 2012-05-20T07:33:55.183 回答
0

您可能想尝试修改获取索引的方式：
而不是 

var numb = $(this).index();

你可以使用：

var numb = $(this).prevAll().length;
于 2012-05-20T07:41:31.813 回答