reset addClass function on ‘click’

综合技术 2017-12-31

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.

Problem courtesy of: Nata2ha Mayan2

Solution

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.

Solution courtesy of: Chase

CSS3 Recipes

责编内容by:CSS3 Recipes (源链)。感谢您的支持!

您可能感兴趣的

WhatsApp chat from commandline/console/cli using G... Whatspup Use Whatsapp from commandline/console/cli using GoogleChrome puppeteer! :smile: ...
Upcoming ESNext features – Part 1 Recently I took a look at JavaScript features still in the proposal stage and handpicked the 10 t...
Amsterdam JSNation takes us to JavaScript church a... A couple of Phusioneers attended Amsterdam JSNation last weekend (May 31 - Jun 1), hosted in ...
TypeSeries: Part 1 — Intro the JS world This is my very first post on internet as someone who calls themself a ‘developer’. I’m a undergradu...
How to build an e-commerce website with Nuxt and C... For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be ...