Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

SynchronousNo
BubblesNo
CancelableNo

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

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.

Examples

This example displays a number of media events.


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


See also

audio
audio
document
source
video element
video object
window
Reference
How to use HTML5 to play video files on your webpage
oncanplay
oncanplaythrough

 

 

Show:
© 2014 Microsoft