javascript - HTML5 视频 addEventListener 'ended' 未触发

Question

我制作了一个可以在视频之间循环的视频 slider 。我在编写代码时多次测试了代码，但是一周后，当我将内容设置到网上时，它不再起作用了。

问题是什么:

Firefox > 工作正常，addEventListener 被调用，一切都很好Chrome > 工作正常，没有错误，但未调用 addEventListener 并且循环未继续。

这是一个常见的 Chrome 错误，还是我自己的代码出现了错误？

我创建的循环是这样的>

    /* SLIDER */
var counter = 0;
var vid_count = 2;
var logotime = 2000;
var waittime = 5000;

function mainRotation(index){

    loadVideo(index);
}
function loadVideo(index){
    var video = document.getElementById('slideVideo' + index);
    if(video.getAttribute("src")==null) {
        video.setAttribute("src", './templates/tacticalghillies/video/slidevideo_' + index + '.mp4');
        video.load();
    }
    else{
        video.currentTime = 0;
        $('#slideVideo' + index).show();
    }

    $('#slideImage').addClass('fadeout');
    var timing = setInterval(function(){
        showVideo(index, function(){
            if(counter < vid_count-1){
                counter++;
                mainRotation(counter);
            }
            else{
                mainRotation(counter);
                counter = 0;
            }

        });
        clearInterval(timing);

    }, waittime)


}

function showVideo(index, cb){
    //fade in video opacity

    //play video
    //video ended:
    var video = document.getElementById('slideVideo' + index);
    video.play();
    console.log("playing");
    video.addEventListener('ended', myHandler, false);
  function myHandler(e){
        if(!e) { e = window.event; }
        console.log("eddd");
        $('#slideImage').removeClass('fadeout');
        var timer = setInterval(function() {
            clearInterval(timer);
            $('#slideVideo' + index).hide();
            cb();
        }, logotime);

  }

}

需要明确的是，这是与这段代码对应的 HTML:

            <div class="animation">
            <img class="a_aligned" id="slideImage" src="./images/slide_holder.png">
            <video class="a_aligned slideVideo" width="1280" style="max-width:1280px;" id="slideVideo0" ></video>
            <video class="a_aligned slideVideo" width="1280" style="max-width:1280px;" id="slideVideo1" ></video>
            <img class="a_aligned" style="z-index:-1;" src="./images/slide_overlay.png">
        </div>

Answer 1

这里存在完全相同的问题...尚未找到如何解决这种情况。作为引用，这段完全相同的代码昨天运行良好。当我将 Chrome 更新到版本 38.0.2125.104 时发生这种情况

实际上我的确切代码是:

$(videoBack).on("ended", function(){ [...]

编辑:因为我有一个演示要做，所以我使用了快速修复，但我仍然需要弄清楚为什么 Chrome 不再接受结束事件。

快速修复:

setTimeout(function(){ [...] }, 1400);