1

タグのボタンの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

インデックスを取得する方法を変更してみてください：
の代わりに 

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

あなたが使うことができます：

var numb = $(this).prevAll().length;
于 2012-05-20T07:41:31.813 に答える
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 に答える