Menu
I wrote a page , and found addEventListener("loadedmetadata",fun) doesn't run correctly on 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 :
<!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. 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 .
Is it a bug of firefox ? How can I avoid this problem ?
I just tired vid.addEventListener("canplay", getmetadata); and got the same result .
It seems the problem is about 'addEventListener'
The video was loaded . I can use vid.play to play it . I also used console.log(vid) to see if the DOM was right , and it was .
It seems addEventListener skip watching "loadedmetadata" and "canplay" , and I don't know why .
I just tried .oncanplay and .onloadedmetadata ,and found it was not the addEventListener ,but the Event caused this problem .
While something (e.g. alert()) disturbed the loading , Firefox couldn't get the Event . So if the video came out to be 'On Loadedmetadata' or 'On Canplay' in the moment , firefox didn't catch up it . After that , the video is loadedmetadata or canplay .It's the attributes , not the event .Firefox misses the event , and rushes forward .
842
Finally I use console.log(vid.readyState) and found a solution .
While loading a page , firefox is so fast that it rush in a hurry while chrome and ie are waiting for something .
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.
readyState 0 means 'No information is available about the media resource' .
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.
I changed the code like this to check if the brower rushed too fast to miss the event '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
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With