addEventListener（“loadedmetadata”，fun）无法正常运行，Firefox错过了事件
[英]addEventListener(“loadedmetadata”,fun) doesn't run correctly ,Firefox misses event
问题描述
I wrote a page , and found addEventListener("loadedmetadata",fun) doesn't run correctly on firefox 
我写了一个页面，发现addEventListener（“loadedmetadata”，fun）在firefox上无法正常运行
I'm trying fixing a bug of a old software .While loading video and page, the software try to draw some player-controller on the page .It worked well on Chrome and IE , but fail to draw some player-controller on Firefox .I tried debuging days until I found problem can simplify like this : 我正在尝试修复一个旧软件的错误。在加载视频和页面时，软件尝试在页面上绘制一些播放器控制器。它在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>
I expected firefox(41.0.1) to alert twice with ("The vid") and ("Meta data for video loaded") , but it didn't. 我期望firefox（41.0.1）用（“The vid”）和（“视频加载的元数据”）提醒两次，但事实并非如此。 These code run correctly on chrome 45 and IE11 .Both of these browers alert twice with ("The vid") and ("Meta data for video loaded") as I expected . 这些代码在chrome 45和IE11上正确运行。这两个浏览器中的两个用我预期的（“The vid”）和（“视频加载的元数据”）提醒两次。
Is it a bug of firefox ? 这是firefox的bug吗？ How can I avoid this problem ? 我该如何避免这个问题？
I just tired vid.addEventListener("canplay", getmetadata); 我刚刚厌倦了vid.addEventListener("canplay", getmetadata); and got the same result . 并得到了相同的结果。 It seems the problem is about 'addEventListener' 似乎问题是'addEventListener'
The video was loaded . 视频已加载。 I can use vid.play to play it . 我可以使用vid.play来播放它。 I also used console.log(vid) to see if the DOM was right , and it was . 我还使用了console.log（vid）来查看DOM是否正确，它是。
It seems addEventListener skip watching "loadedmetadata" and "canplay" , and I don't know why . 似乎addEventListener跳过观看“loadedmetadata”和“canplay”，我不知道为什么。
I just tried .oncanplay and .onloadedmetadata ,and found it was not the addEventListener ,but the Event caused this problem . 我刚试过.oncanplay和.onloadedmetadata，发现它不是addEventListener，但事件导致了这个问题。
While something (eg alert()) disturbed the loading , Firefox couldn't get the Event . 虽然某些事情（例如alert（））扰乱了加载，但Firefox无法获得该事件。 So if the video came out to be 'On Loadedmetadata' or 'On Canplay' in the moment , firefox didn't catch up it . 因此，如果视频在此刻出现'On Loadedmetadata'或'On Canplay'，那么firefox就没有赶上它。 After that , the video is loadedmetadata or canplay .It's the attributes , not the event .Firefox misses the event , and rushes forward . 之后，视频将被加载元数据或canplay。这是属性，而不是事件.Firefox错过了事件，并向前冲。
2 个解决方案
解决方案1
6 已采纳 2015-10-14 07:38:06
Finally I use console.log(vid.readyState) and found a solution . 最后我使用console.log(vid.readyState)并找到了解决方案。
While loading a page , firefox is so fast that it rush in a hurry while chrome and ie are waiting for something . 在加载页面时，firefox是如此之快，以至于赶紧匆忙而且正在等待某些东西。
At the moment vid.addEventListener("loadedmetadata", getmetadata) , vid.readyState come out to be more than 2 in firefox , while on chrome and ie , vid.readyState is still 0 . 目前vid.addEventListener("loadedmetadata", getmetadata) ，vid.readyState在firefox中超过2 ，而在chrome和ie上，vid.readyState仍为0 。
readyState 0 means 'No information is available about the media resource' . readyState 0表示“没有关于媒体资源的信息”。
readyState 2 means 'Data is available for the current playback position, but not enough to actually play more than one frame' , the same like 'loadedmetadata'.It's not an event , but a property. readyState 2表示'数据可用于当前播放位置，但不足以实际播放多个帧'，与'loadedmetadata'相同。它不是事件，而是属性。
I changed the code like this to check if the brower rushed too fast to miss the event '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>
For more informaion about readyState : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState 有关readyState的更多信息： https ： //developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
解决方案2
0 2019-03-13 21:15:13
I faced the same problem and got a solution. 我遇到了同样的问题并得到了解决方案。 I used loadeddata event instead of loadedmetadata event and it worked for me. 我使用了loadeddata事件而不是loadedmetadata事件，它对我loadedmetadata 。
In the Definitive Guide Javascript book it says loadeddata event means: 在权威指南Javascript书中，它说loadeddata事件意味着：
Data for the current playback position has loaded for the first time, and
readyStatehas changed toHAVE_CURRENT_DATA.readyState已更改为HAVE_CURRENT_DATA。
And HAVE_CURRENT_DATA means: HAVE_CURRENT_DATA表示：
Media data for
currentTimehas been loaded, but not enough data has been loaded to allow the media to play.currentTime媒体数据，但未加载足够的数据以允许媒体播放。 For video, this typically means that the current frame has loaded, but the next one has not.readyStateproperty of value"2"."2"readyState属性。
I hope my answer makes it clear: 我希望我的回答清楚地表明：
<!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");
// here I used "loadeddata" event and worked very well♥
vid.addEventListener("loadeddata", getmetadata);
function getmetadata() {
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.