jQuery事件侦听器出现问题

Question

Game-wrapper and game-wrapper2 divs have circular progress bar. I want to show first div, then play video, then show another div, and finally, play a second video.

I made this jQuery code, but it doesn't work.

 jQuery(document).ready(function() { "use strict"; var movie = jQuery('#gameVideo'); var movie2 = jQuery('#gameVideo2'); jQuery(".first-widget").click(function() { jQuery(".first-screen").hide(); jQuery(".game").show(); jQuery(".game-wrapper").show(); movie[0].play(); jQuery("#gameVideo").on("play", function () { jQuery(".game-wrapper").hide(); }); jQuery("#gameVideo").on("ended", function() { jQuery(".game-wrapper2").show(); }); movie2[0].play(); jQuery("#gameVideo2").on("play", function () { jQuery(".game-wrapper2").hide(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="loading-div-right"> <div class="first-screen"><img src="images/first-screen-animation.png" alt=""></div> <div class="game"> <img src="images/game-border.png" alt=""> <div class="game-wrapper"> <div class="left"></div> <div class="right"></div> <div class="mask"></div> </div> <div> <video width="300px" height="300px;" id="gameVideo" src="videos/lake.mp4"/> </div> <div class="game-wrapper2"> <div class="left"></div> <div class="right"></div> <div class="mask"></div> </div> <div> <video width="300px" height="300px;" id="gameVideo2" src="videos/lake.mp4"/> </div> </div> </div> 

Answer 1

Lets see your actions flow :

1. Show first div
2. Play video 1
3. Show another div
4. Play video 2

Lets see it now in details with events

1. Show first div & Start playing video 1
2. On Video 1 end --> Show another div & Start playing video 2
3. On Video 2 end --> Do something else

So you need 1 "OnEnded" event on each video

Now in the code for these steps based on your code:

jQuery(document).ready(function() {

// Define Video A
var movie = jQuery('#gameVideo');
// Define Video B
var movie2 = jQuery('#gameVideo2');

// My timer
var timer = null;

// If someone press this button,
// I will "Show first div" & "Play video 1"
jQuery(".first-widget").click(function() {

    // Reset all
    clearTimeout(timer);
    movie.stop();
    movie2.stop();
    movie.currentTime = 0;
    movie2.currentTime = 0;

    // Show first div
    // Or what ever you need to be visible
    jQuery(".first-screen").hide();
    jQuery(".game").show();
    jQuery(".game-wrapper").show();
    // Reset the other wrapper
    jQuery(".game-wrapper2").hide();

    // Wait 10 secs
    timer = setTimeout(function(){

        // Play video 1
        movie.show();
        movie[0].play();
        movie.show();
        jQuery(".game-wrapper").hide();

    }, 10*1000);

});

// Define Video A event listeners
// On the end of video A
movie.on("ended", function() {

    // Show another div
    movie.hide();
    jQuery(".game-wrapper2").show();
    jQuery(".game-wrapper").hide();

    // Wait 10 secs
    timer = setTimeout(function(){

        // Start playing video 2
        movie2.show();
        movie2[0].play();
        jQuery(".game-wrapper2").hide();

    }, 10*1000);

});

// Define Video B event listeners
// On the end of video B
movie2.on("ended", function () {

    // Do something else
    movie2.hide();
    jQuery(".game").hide();
    jQuery(".first-screen").show();

});

});

Some mistakes on your code:

1. you play both video the same time

     movie[0].play(); ... // The commands here do not pause the code execution movie2[0].play(); 

2. you call an action and after that you define the event for this action

     movie[0].play(); // Fire play event ... there is no handler movie.on("play", function () { // Oh... now there is a handler but the event passed... jQuery(".game-wrapper").hide(); }); 

---

Some more asked code

Make a function to reset all elements... all elements from all widgets.

var resetAll = function(){
    // Clear timer
    clearTimeout(timer);

    // Stop all videos
    movie1.stop();
    movie2.stop();
    movie3.stop();
    ...

    // Reset all videos
    movie1.currentTime = 0;
    movie2.currentTime = 0;
    movie3.currentTime = 0;
    ...

    // Hide all video wrappers elements
    // first-widget
    jQuery(".first-screen").hide();
    jQuery(".game").hide();
    jQuery(".game-wrapper").hide();
    jQuery(".game-wrapper2").hide();
    // second-widget
    jQuery(".first-screen").hide();
    jQuery(".music").hide();
    jQuery(".music-wrapper").hide();
    jQuery(".music-wrapper2").hide();
    // third-widget
    ...

}

then call it at the begining of the click on a widget.

jQuery(".first-widget").click(function() {

    // Reset all
    resetAll();

    ...

});

jQuery(".second-widget").click(function() {

    // Reset all
    resetAll();

    ...

});

...