Question

我一直在努力争取阵列及其增量,但我想我有一个解决办法。也许。问题在于当一个视频结束阵列时,它会增加我使用的播放视频功能的增量。这不会是一个问题,但如果你重新点击视频,它会不断加起来。

我意识到,我应该能够重置索引值,不管它是什么,也不管我点击了多少次, 当我点击时, 重置到视频的索引值。然后,当视频结束时, 自动, 递增是 $ (“# myVid”).index ()

我只需要知道怎么写这个。我尝试过在单击下使用 index=$ ("# myVid").index () 。但是这不起作用。我还尝试用一个函数来包扎它( 这似乎有点过分), 比如 :



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


因此, 我如何设定播放视频的索引值? 而且, 没有 < code> index = $ (this). index ();  不起作用, 因为它所做的就是在 < code> 点击  s 函数开头重现当前索引值 。

如有任何投入,我将不胜感激
EDIT: per request, the full function and html... so, the html is

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


编辑: 好, 编辑 < a href=> "http://jsfiddle. net/ naata2ha/ Tr7K9/" rel = "nofollow" >jsfiddle  这里包含所有功能

Answer 1


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

您对 jQuery < a href=> 的 jQuery < a href=" http://api.jquery.com/ index/" rel= "nofollow"\\ code>. index () 方法与 $ ("#myVid") (#myVid") 。 index () 不是一个合适的方法来解析当前的视频 s 索引, 因为它总是会返回“ myVid” 元素相对于其兄弟姐妹的索引( 它永远不会改变) 。您在“ li” 点击处理器中使用了 < code > () < 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 () 函数中, 而该函数需要一个参数 colviaNumPlay , 要播放该参数的视频, 并在 p流Video 中保存该数字, 所以在“ endid” 处理器中, 我们可以使用 p流Video 来解出更高一个索引( 按需要包在阵列的起始处) 。

如果您还需要设置一些课程来突出显示与当前播放的视频相对应的 li 或用 < code> playVideo () 函数我也会这样做。 (显然, 您有另外的代码没有显示, 但我无法确切猜出您在其它代码中在做什么。 )

友情链接