Question

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

我意识到，当我点击时，我应该能够将索引值重置为视频的索引值，无论它是什么，无论我点击了多少次。然后，当视频结束时，繁荣，增量为{{1}} + 1。

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

index= $("#myVid").index()

那么，如何将索引值设置为正在播放的视频的值？并且，没有if (index >= $("#myVid").index()) { index= $("#myVid").index() }不起作用，因为它只是在index = $(this).index();函数的开头重述当前索引值。

我会感激任何输入〜

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

所以，HTML是

click

然后点击

的相关完整功能

  <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()
                }

编辑：好的，这里有jsfiddle，包含所有功能

Answer 1

这不是一个完整的解决方案，因为我真的不明白你对这个问题的解释，但是......

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

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

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为了播放哪个视频并将该数字保存在currentVideo中，所以在“已结束”处理程序中，我们可以使用currentVideo来找出更高的索引（根据需要回绕到数组的开头）。

如果您还需要设置一些类来突出显示与当前正在播放的视频相对应的li或我使用playVideo()功能执行此操作的内容。（你显然有额外的代码，你没有显示，但我无法猜测你在其他代码中做了什么。）

如果大于某个数字，则将索引值重置为self

1 个答案: