HTMLMediaElement: loadeddata event

The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.

Examples

These examples add an event listener for the HTMLMediaElement's loadeddata event, then post a message when that event handler has reacted to the event firing.

Using addEventListener():

const video = document.querySelector('video');

video.addEventListener('loadeddata', (event) => {
  console.log('Yay! The readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for the first time.');
});

Using the onloadeddata event handler property:

const video = document.querySelector('video');

video.onloadeddata = (event) => {
  console.log('Yay! The readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for the first time.');
};

Specifications

Browser compatibility

Related Events

• HTMLMediaElement: playing event
• HTMLMediaElement: waiting event
• HTMLMediaElement: seeking event
• HTMLMediaElement: seeked event
• HTMLMediaElement: ended event
• HTMLMediaElement: loadedmetadata event
• HTMLMediaElement: loadeddata event
• HTMLMediaElement: canplay event
• HTMLMediaElement: canplaythrough event
• HTMLMediaElement: durationchange event
• HTMLMediaElement: timeupdate event
• HTMLMediaElement: play event
• HTMLMediaElement: pause event
• HTMLMediaElement: ratechange event
• HTMLMediaElement: volumechange event
• HTMLMediaElement: suspend event
• HTMLMediaElement: emptied event
• HTMLMediaElement: stalled event

See Also

• HTMLAudioElement
• HTMLVideoElement
• <audio>
• <video>