loadeddata | onloadeddata event

Occurs when media data is loaded at the current playback position.

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

Syntax

HTML Attribute	<element onloadeddata = "handler(event)">
Event Property	object.onloadeddata = handler;
addEventListener Method	object.addEventListener("loadeddata", 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 onloadeddata event is raised when data for the immediate current playback position is available. However, when the event fires, it doesn't guarantee that enough data is available to successfully begin playback.

This event occurs after onloadedmetadata and before oncanplay.

To invoke this event, do one of the following:

Load a media resource.

Note The Windows load event is delayed if there is media network activity.

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);