onloadedmetadata event


onloadedmetadata Event

Instance

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
</head>
<body> 

<video controls onloadedmetadata="myFunction()">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<script>
function myFunction() {
    alert("视频元数据已加载");
}
</script>

</body> 
</html>

Run instance»

Click "Run Instance" button to view an online instance

More examples are included at the bottom of this article.

Definition and usage

The onloadedmetadata event is triggered after the metadata of the specified video/audio (audio/video) is loaded.

The metadata of video/audio (audio/video) includes: duration, size (video), text track.

During the loading process of audio/video, the trigger sequence is as follows:

  1. onloadstart
  2. ondurationchange
  3. onloadedmetadata
  4. onloadeddata
  5. onprogress
  6. oncanplay
  7. oncanplaythrough
##Browser support

The numbers in the table represent the version number of the first browser that supports this event.

event##onloadedmetadata





Yes9.0YesYesYes
##Syntax
HTML:

< ;

element
onloadedmetadata="
myScript">Try itJavaScript:

object
.onloadedmetadata=function(){
myScript}; Try itIn JavaScript, use the addEventListener() method:

object
.addEventListener("loadedmetadata",
myScript); Try it
Note:
Internet Explorer 8 and earlier IE versions do not support addEventListener( ) method.

Technical details

Whether bubbling is supported:NoCan be canceled:NoEvent type:Event <audio>, <video>
##Supported HTML tags:
##More examples
Examples

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
</head>
<body> 

<audio controls onloadedmetadata="myFunction()">
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio> 
<script>
function myFunction() {
    alert("音频元数据已加载");
}
</script>

</body> 
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

##
←
→