loadedmetadata | onloadedmetadata event

Occurs when the duration and dimensions of the media have been determined.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.12

Syntax

HTML Attribute	<element onloadedmetadata = "handler(event)">
Event Property	object.onloadedmetadata = handler;
addEventListener Method	object.addEventListener("loadedmetadata", handler, useCapture)

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.12

Remarks

The onloadedmetadata event is raised when enough of the resource has been obtained to know the full duration of the resource. In the case of a video element, the dimensions of the video are also known.

This event occurs after ondurationchange.

To invoke this event, do one of the following:

Load a media resource.

Examples

This example displays a number of media events.

HTML


// content has loaded, display buttons and set up events
video.addEventListener("canplay", function () {
  document.getElementById("buttonbar").style.display = "block";
}, false);

//  display video duration when available
video.addEventListener("loadedmetadata", function () {
  vLength = video.duration.toFixed(1);
  document.getElementById("vLen").textContent = vLength; // global variable
}, false);

//  display the current and remaining times
video.addEventListener("timeupdate", function () {
  //  Current time  
  var vTime = video.currentTime;
  document.getElementById("curTime").textContent = vTime.toFixed(1);
  document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
//  paused and playing events to control buttons
video.addEventListener("pause", function () {
  document.getElementById("play").textContent = ">";
}, false);

video.addEventListener("playing", function () {
  document.getElementById("play").textContent = "||";
}, false);

video.addEventListener("volumechange", function () {
  if (video.muted) {
    // if muted, show mute image
    document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />";
  } else {
    // if not muted, show not muted image
    document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />";
  }
}, false);
//  Download and playback status events.
video.addEventListener("loadstart", function () {
  document.getElementById("ls").textContent = "Started";
}, false);
video.addEventListener("loadeddata", function () {
  document.getElementById("ld").textContent = "Data was loaded";
}, false);

video.addEventListener("ended", function () {
  document.getElementById("ndd").textContent = "Playback ended";
}, false);

video.addEventListener("emptied", function () {
  document.getElementById("mt").textContent = "Video reset";
}, false);

video.addEventListener("stalled", function () {
  document.getElementById("stall").textContent = "Download was stalled";
}, false);
video.addEventListener("waiting", function () {
  document.getElementById("waiting").textContent = "Player waited for content";
}, false);
video.addEventListener("progress", function () {
  pgFlag += "+";
  if (pgFlag.length > 10) {
    pgFlag = "+";
  }
  document.getElementById("pg").textContent = pgFlag;

}, false);
video.addEventListener("durationchange", function () {
  document.getElementById("dc").textContent = "Duration has changed";
}, false);
video.addEventListener("canplaythrough", function () {
  document.getElementById("cpt").textContent = "Ready to play whole video";
}, false);