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()都会被调用。事件侦听器error从不触发（例如，当使用不存在的src时）。

Answer 1

我找到了解决方案。看来，<source>元素正在接收错误，而不是视频元素本身。