HTML5 媒体活动未按预期进行

Question

我想创建一个图像后备以防无法加载视频。我发现解决方案是使用 media events 来解决这个问题。但是，它们似乎没有按预期工作。

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

不管视频加载成功与否，revealVideo()总会被调用。 eventListener error 永远不会被触发（例如，当使用不存在的 src 时）。

Answer 1

我找到了解决方案。 <source> 元素似乎收到错误，而不是视频元素本身。