[英]HTML5 media events not working as expected
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. 不论视频是否成功加载,
revealVideo()
将始终调用revealVideo()
。 The eventListener error
is never triggered (for instance when using a src
which doesn't exist). 永远不会触发eventListener
error
(例如,当使用不存在的src
时)。
I found the solution. 我找到了解决方案。 It appears that the
<source>
element is recieving errors, not the video element itself. 看来
<source>
元素正在接收错误,而不是video元素本身。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.