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

Tags:

Javascript

Html

Firefox

Events

Recent Posts