addEventListener("loadedmetadata",fun) doesn't run correctly ,Firefox misses event
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