Question

我制作了一个循环播放视频的视频滑块。我在处理代码时已多次测试代码，但一周后，当我在线设置内容时，它不再起作用了。

问题是什么：

Firefox＆gt;工作正常，addEventListener被调用，一切都很好 Chrome＆gt;工作正常，没有错误但是没有调用addEventListener并且循环不会继续。

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

我创建的周期是＆gt;

    /* 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);

HTML5视频addEventListener'已结束'未被触发

1 个答案: