Cat*_*let 5 javascript firefox events html5
我写了一个页面,发现addEventListener("loadedmetadata",fun)在firefox上无法正常运行
我正在尝试修复一个旧软件的错误.在加载视频和页面时,软件尝试在页面上绘制一些播放器控制器.它在Chrome和IE上运行良好,但无法在Firefox上绘制一些播放器控制器.我尝试了几天,直到我发现问题可以像这样简化:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
vid.addEventListener("loadedmetadata", getmetadata);
function getmetadata()
{
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
我期望firefox(41.0.1)用("The vid")和("视频加载的元数据")提醒两次,但事实并非如此.这些代码在chrome 45和IE11上正确运行.这两个浏览器中的两个用我预期的("The vid")和("视频加载的元数据")提醒两次.
这是firefox的bug吗？我该如何避免这个问题？
我只是累了vid.addEventListener("canplay", getmetadata);,得到了同样的结果.似乎问题是'addEventListener'
视频已加载.我可以使用vid.play来播放它.我还使用了console.log(vid)来查看DOM是否正确,它是.
似乎addEventListener跳过观看"loadedmetadata"和"canplay",我不知道为什么.
我刚试过.oncanplay和.onloadedmetadata,发现它不是addEventListener,但事件导致了这个问题.
虽然某些事情(例如alert())扰乱了加载,但Firefox无法获得该事件.因此,如果视频在此刻出现'On Loadedmetadata'或'On Canplay',那么firefox就没有赶上它.之后,视频被加载元数据或canplay.这是属性,而不是事件.Firefox错过了事件,并向前冲.
最后我使用console.log(vid.readyState)并找到了解决方案.
在加载页面时,firefox是如此之快,以至于赶紧匆忙而且正在等待某些东西.
目前vid.addEventListener("loadedmetadata", getmetadata),vid.readyState比2firefox 更多,而在chrome和ie,vid.readyState仍然是0.
readyState 0表示"没有关于媒体资源的信息".
readyState 2表示'数据可用于当前播放位置,但不足以实际播放多个帧',与'loadedmetadata'相同.它不是事件,而是属性.
我改变了这样的代码来检查浏览器是否冲得太快而不能错过事件'loadedmetadata'.
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
vid.addEventListener("loadedmetadata", getmetadata);
if (vid.readyState >= 2) {
getmetadata();
}
function getmetadata()
{
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
有关readyState的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState