Question

I’ve been struggling with an array and its increments, but I think I have a solution. Maybe. The problem is that when a video ends in the array, it adds an increment to the play video function I’ve employed. This wouldn’t be a problem, except it keeps adding up if you’re clicking through the videos.

I realized that I should be able to reset the index value, whatever it is and regardless of how many times I’ve clicked, to the index value of the video when I click. Then, when the video ends, boom, increment is $("#myVid").index()+1.

I just need to know how to write this. I’ve tried just having index= $("#myVid").index() under the onclick, but that doesn’t work. I’ve also tried wrapping it in an if function (which seems like overkill), like so:

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

So, how do I set the index value to the value of the video that’s playing? And, no index = $(this).index(); does not work because all it does is restate the current index value at the beginning of the click‘s function.

I’ll be grateful for any input~

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>

and then the related, full, functions
for the click

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

and then for the play next

 $("#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);
        });
    });

Edit: okay, a jsfiddle here, with all of the functions

Answer 1

This isn’t really a complete solution, because I don’t really understand your explanation of the problem, but…

Your use of the jQuery .index() method with $("#myVid").index() is not an appropriate way to figure out the current video’s index since it will always just return the index of the “myVid” element relative to its siblings (which won’t ever change). You have used .index() correctly within the “li” click handler, since (as far as I can tell) you actually want the index relative to siblings in that case, to tell you which one was clicked.

I think it would help you a lot if you tidied up your code. Don’t repeat the code that sets the video source and loads and plays it – move that stuff into a single function, and then call that function from the different places that need it:

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

I don’t see how the above would go wrong, because now the only place in the code that starts a video playing is within the new playVideo() function, and that function takes a parameter videoNumToPlay for which video to play and saves that number in currentVideo so within the “ended” handler we can use currentVideo to figure out the index one higher (wrapping around to the beginning of the array as needed).

If you also need to set some classes to highlight the li corresponding to the currently playing video or something I’d do that from with the playVideo() function. (You’ve obviously got additional code that you’re not showing, but I can’t guess exactly what you’re doing in that other code.)