HTML5 video ended event called several times

Question

I have a problem with playing a video in HTML5 and the ended Event. I view some HTML content and after a expired time I play a video. Is the video ended I will show the HTML content again. This should loop. Its for a presentation.

My problem is, that after the first complete run, the ended event will fired repeatedly and the HTML content will displayed false.

Here is the code part:

function playVideo() {
    var video = $('video')[0];
    video.addEventListener('ended', function () {
        $('video').hide();
        fadeShow();
    }, false);
    video.play();  
}

function fadeHide() {
    $('#content').fadeOut(1200, function () {
        $('div ul[id^=item]').each(function () {
            $(this).hide();
        });
        $('li[class^=visitor] span[id]').each(function () {
            $(this).hide();
        });
        playVideo();
    });
}

The fadeHide(); function will not called two times, just the video.addEventListener('ended', function () {}; fill called several times. `fadeshow(); will display the HTML content. Actually I use the newest version of Chrome.

Does anyone have an idea what went wrong?

Edit HTML video code. I hide the video with css.

<video>
    <source src="video/mp4/xxx.mp4" type="video/mp4" />
    <source src="video/ogg/xxx.ogg" type="video/ogg" />
    <source src="video/webm/xxx.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

Greetz

Solution 1

You should assign the event listener once or when you assign it upon play everytime, you need to detach the event listener again.

function playVideo() {
    var video = $('video')[0];
    video.addEventListener('ended', function () {
        $('video').hide();
        video.removeEventListener('ended'); <<<<<<<
        fadeShow();
    }, false);
    video.play();  
}

EDIT: I tested in chrome with this fiddle and indeed even if you remove the eventlistener it starts to fire multiple times. It seems there's an issue that removing the event listener does not work correctly.

You should change the event binding / unbinding to jQuery then there is only one ended event.

function playVideo() {
    var video = $('video')[0];
    $('video').bind('ended', function () {
        $('video').unbind('ended');
        $('video').hide();
        fadeShow();
    });
    video.play();  
}

And your fiddle updated (with shorter video)

Solution 2

Instead of adding an event listener and then manually removing it, try simply using the built in command called "one" (https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third-)

So your code will become somewhat like this:

function playVideo() {
    var video = $('video')[0];
    $('video').one('ended', function () {
        $('video').hide();
        fadeShow();
    });
    video.play();  
}

Which is a little brief, and more dependent on the API itself. That I believe is generally a good practice because the functions in the API have been tested multiple times by a large number of people in the community over multiple browsers and operating systems.