Jovica Bojic Jovica Bojic - 1 month ago 8
CSS Question

Issue with jQuery event listener

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

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

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

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

    // Wait 10 secs
    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
    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();
     });