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

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