jQuery事件侦听器出现问题

Question

Game-wrapper和game-wrapper2 div具有圆形进度栏。 我想先显示div，然后播放视频，然后再显示另一个div，最后再播放第二个视频。

我编写了此jQuery代码，但不起作用。

 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

让我们来看看您的操作流程：

1. 显示第一格
2. 播放影片1
3. 显示另一个div
4. 播放影片2

现在让我们详细了解事件

1. 显示第一个div并开始播放视频1
2. 在视频1的末尾->显示另一个div并开始播放视频2
3. 在视频2末尾->做其他事情

因此，每个视频需要1个“ OnEnded”事件

现在，根据您的代码在这些步骤的代码中：

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

});

}）;

您的代码上的一些错误：

1. 您同时播放两个视频

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

2. 您调用一个动作，然后为该动作定义事件

     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(); }); 

---

其他一些要求的代码

创建一个功能来重置所有元素...所有小部件中的所有元素。

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
    ...

}

然后在点击小部件开始时调用它。

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

    // Reset all
    resetAll();

    ...

});

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

    // Reset all
    resetAll();

    ...

});

...