0

我一直在努力处理数组及其增量，但我认为我有一个解决方案。也许。问题是当视频在数组中结束时，它会为我使用的播放视频功能增加一个增量。这不是问题，除非您单击视频时它会不断增加。

我意识到我应该能够在我点击时将索引值重置为视频的索引值，无论它是什么，也不管我点击了多少次。然后，当视频结束时，繁荣，增量为$("#myVid").index()+1。

我只需要知道如何写这个。我试过只index= $("#myVid").index()在onclick下，但这不起作用。我也尝试将它包装在一个 if 函数中（这看起来有点矫枉过正），就像这样：

if (index >= $("#myVid").index()) {
    index= $("#myVid").index()
}

那么，如何将索引值设置为正在播放的视频的值？而且， noindex = $(this).index();​​不起作用，因为它所做的只是在click's 函数的开头重述当前索引值。

如有任何意见，我将不胜感激~

编辑：每个请求，完整的功能和 html...

所以，html是

  <div id="wrapper"><div id="MyT"></div>
    <div class="buttons">
        <div id="content">
          <div class="control">
          <div class="progress"><span class="timeBar"></span></div></div>
            <div class="slider"></div>
            <ul class='thumbs'>
                <li rel='1'><div style="top:0px;"><img src="graphics/filler.png" alt="" width="280" height="128" /></div></li>
                <li rel='2'><div style="top:128px;"><img src="graphics/filler2.png" alt="" width="280" height="128" /></div></li>
                <li rel='3'><div style="top:256px;"><img src="graphics/filler.png" alt="" width="280" height="128" /></div></li>
                <li rel='4'><div style="top:384px;"><img src="graphics/filler2.png" alt="" width="280" height="128" /></div></li>
                <li rel='5'><div style="top:512px;"><img src="graphics/filler.png" alt="" width="280" height="128" /></div></li>
                <li rel='6'><div style="top:640px;"><img src="graphics/filler2.png" alt="" width="280" height="128" /></div></li>
            </ul>
       </div>
    </div>
<div id="bigPic">
 <video id="myVid" alt="" class="normal" type="m4v" showlogo="false" height="768" width="1024"/>
</div>

然后是
点击的相关完整功能

$('li', '.thumbs').on('touchstart click', function() {
    index = $(this).index();
    var myVideo = document.getElementById('myVid');
        myVideo.src = videos[index];
        myVideo.load();
        myVideo.play();
        if (index >= $("#myVid").index()) {
            index= $("#myVid").index()
                }

然后接下来的戏

 $("#myVid").bind("ended", function() {
            $("#bigPic").removeClass("move");
            $("#MyT").fadeIn(250);
            function playArray(ele, array) {
                if (index   >= array.length) {
                    index = 1;
                }
                if ($("#myVid").index() < index+1) {
                    index++;    
                }

                ele.src = array[index];
                ele.load();
                ele.play();
            }
            playArray(document.getElementById("myVid"), videos);
        });
    });

编辑：好的，这里有一个jsfiddle，具有所有功能

4

1 回答 1

1

这并不是一个完整的解决方案，因为我不太了解您对问题的解释，但是...

您使用 jQuery.index()方法$("#myVid").index()不是找出当前视频索引的合适方法，因为它总是只返回“myVid”元素相对于其兄弟元素的索引（永远不会改变）。您.index()在“li”单击处理程序中正确使用了，因为（据我所知）您实际上希望在这种情况下相对于兄弟姐妹的索引来告诉您单击了哪个。

我认为如果你整理你的代码会对你有很大帮助。不要重复设置视频源并加载和播放它的代码 - 将这些内容移动到单个函数中，然后从需要它的不同位置调用该函数：

var videos = [ /* your array of videos, you don't
                  show how this is defined */ ],
    currentVideo;

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

$('li', '.thumbs').on('touchstart click', function() {
    playVideo( $(this).index() );
});

$("#myVid").bind("ended", function() {
   $("#bigPic").removeClass("move");
   $("#MyT").fadeIn(250);       
   playVideo( (currentVideo + 1) % videos.length );
});

我看不出上面会出现什么问题，因为现在开始播放视频的代码中唯一的位置是在新playVideo()函数中，并且该函数采用videoNumToPlay要播放的视频的参数并将该数字保存在currentVideoso 中我们可以使用“结束”处理程序currentVideo来找出高一的索引（根据需要环绕到数组的开头）。

如果您还需要设置一些类来突出显示与当前播放的视频相对应的 li 或者我会使用该playVideo()功能执行的操作。（您显然还有其他代码没有显示，但我无法准确猜出您在其他代码中所做的事情。）

于 2012-05-23T03:55:21.993 回答