reset addClass function on 'click'

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.

Can you do a "$('#MyT').removeClass('clear');" after you play the video? — Chase, May 07 '12 at 00:30
@Chase tell me how to add the listener for when the video ends and I'll tell you. still new with jquery, so I don't really know how :( — Nata2ha Mayan2, May 07 '12 at 00:37

Chase · Accepted Answer · 2012-05-07T01:16:32.983

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.

edited May 07 '12 at 01:16

answered May 07 '12 at 00:40

Chase

29,019
1
49
48

that works, but I need it also for if the video's not done playing, and a person where to click another of the thumbnails – Nata2ha Mayan2 May 07 '12 at 00:49
Could you elaborate just a bit more so I can get a better idea of what you mean? Also, this link may help some as well http://stackoverflow.com/questions/6877403/how-to-tell-if-a-video-element-is-currently-playing. – Chase May 07 '12 at 00:57
The recent update probably isn't as helpful as you're looking for, but the idea is there. I hope it helps a bit though. – Chase May 07 '12 at 01:21
Glad I could help and I apologize it's not more...but honestly without going all out and doing it, there's not a whole lot more I can do but explain the process I would go through. Good luck and I hope it works for you!! =) – Chase May 07 '12 at 01:24

reset addClass function on 'click'

1 Answers1