Question

so, I have a function that makes an image invisible, and at the same time starts playing a video (1 out of 6) underneath it. It works great, the div fades out, and it plays. However, it only works the first time.

There are six thumbs(all an item in a list), and they each play one of the videos, right? So, each time a thumb is pressed, I need the image to comeback(quickly) and then fade out slowly like it does. So, a mini reset of sorts on each click.

the code is

$(document).ready(function () {

    $('li, .thumbs').on('click', function () {


        var numb = $(this).index(),
            videos = [
                'images/talking1.m4v',
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];

        myVideo.load();
        $('#MyT').addClass('clear');
        myVideo.play();

    });

});

i tried shuffling things around, and no dice. And, yes, it is supposed to start fading once the video has finished loading. This is for iPad and I haven’t found a better way around the flicker you get when a video loads.

Edit: okay, trying to explain this best way I can…
the page loads, and you have the image on top. There are six thumbnails, and one is clicked. The image fades out while the video loads(this doesn’t have to be synced, so long as the video finishes loading first), then it plays. If a some point, another of the thumbs is pressed, the image pops back up and fades, to cover while the video loads. Basically, the condition of the first click repeats on each click.

Answer 1

Try the following for checking when the video has ended:

$('#my_video_id').bind("ended", function(){ 
      alert('Video Ended'); 
      $('#MyT').removeClass('clear');
    });

Taken from http://help.videojs.com/discussions/questions/40-jquery-and-event-listeners

Seems to have worked for them, so let me know if you have similar results.

Edit

So when your thumbnail is clicked you should first check to see if a video is already playing as discussed in the link in the comments section. If a video is playing, stop that video and add the class ‘clear’ back the that video. Then you can go ahead and fade the 2nd video in. I obviously can’t write all that for you because I don’t know all the conditions, constraints and the html code you have, but the basic outline is there.