CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
Martijn de Langh
Martijn de Langh

Reputation: 425

HTML5 video addEventListener 'ended' not fired

I have made a video slider that cycles trough video's. I tested the code several time when I was working on it, but a week later when I set the content online it did not function anymore.

What the problem is:

Firefox > Works fine, the addEventListener gets called and all is well Chrome > Works fine, no errors but the addEventListener is not called and the cycle is not continued.

Is this a common Chrome bug, or did I bug my own code?

The cycle that I have created is this>

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

  }

}

Just to be clear this is the HTML that corrosponds with this piece of code:

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

Upvotes: 0

Views: 2315

Answers (1)

user1736571
user1736571

Reputation: 91

Exactly same problem here... Didn't find yet how to solve this situation. For information, this exactly same code was working well yesterday. It happend when I updated Chrome to the version 38.0.2125.104

Actually my exact code is :

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

Edit: Because I had a demo to do, I have use a quick fix, but I still have to figure why Chrome doesn't take the ended event anymore.

Quick fix:

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

Upvotes: 1

Related Questions