我制作了一个视频滑块,可以循环浏览视频。在编写代码时,我几次测试了该代码,但是一周后,当我将内容在线设置时,它不再起作用。

问题是什么:

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>

最佳答案

完全相同的问题在这里...尚未找到如何解决这种情况的方法。
有关信息,昨天完全相同的代码运行良好。我将Chrome更新到版本38.0.2125.104时发生了

实际上我的确切代码是:

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


编辑:因为我有一个演示要做,所以我使用了一个快速修复程序,但是我仍然必须弄清楚为什么Chrome不再处理结束事件。

快速解决:

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

关于javascript - HTML5视频addEventListener'end'未触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26507098/

10-12 14:03
查看更多