addEventListener(“loadedmetadata”,fun) doesn't run correctly ,Firefox misses event
Question
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 (eg 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 .
2 answers
solution1
6 ACCPTED 2015-10-14 07:38:06
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
solution2
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.
In the Definitive Guide Javascript book it says loadeddata event means:
Data for the current playback position has loaded for the first time, and
readyStatehas changed toHAVE_CURRENT_DATA.
And HAVE_CURRENT_DATA means:
Media data for
currentTimehas been loaded, but not enough data has been loaded to allow the media to play. For video, this typically means that the current frame has loaded, but the next one has not. This state occurs at the end of a sound or movie. It hasreadyStateproperty of value"2".
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.