HTML5 media events not working as expected

Question

I want to create an image fallback in case a video couldn't be loaded. I found out that the solution is to use media events for this problem. However, they don't seem to work as expected.

/**
 * Dynamically load the video within the given slide.
 */
var loadVideo = function(slide) {
    var video = $('<video muted>'),
        source = $('<source>', {
            src: slide.attr('data-video'),
            type: 'video/mp4'
        });

    video.html(source);

    video[0].addEventListener('canplay', revealVideo(video), false);
    video[0].addEventListener('error', function() {
        alert('Video could not be loaded.');
        // fallback
    }, false);
    video[0].onended = function() { replayVideo(video) };

    slide.append(video);
};

It doesn't matter whether the video is succesfully loaded or not, revealVideo() will always get called. The eventListener error is never triggered (for instance when using a src which doesn't exist).

Answer 1

I found the solution. It appears that the <source> element is recieving errors, not the video element itself.