The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
| Bubbles | No |
| Cancelable | No |
| Interface | Event
|
| Target | Element |
| Default Action | None |
| Event handler property | GlobalEventHandlers.onloadeddata
|
| Specification | HTML5 media |
Note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings.
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
| Specification | Status |
| HTML Living StandardThe definition of 'loadeddata media event' in that specification. | Living Standard |
| HTML5The definition of 'loadeddata media event' in that specification. | Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
loadeddata event
|
Chrome
Full support 3 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 9 |
Opera
Full support 10.5 |
Safari
Full support 3.1 |
WebView Android
Full support Yes |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
Related Events
HTMLMediaElement: playing eventHTMLMediaElement: waiting eventHTMLMediaElement: seeking eventHTMLMediaElement: seeked eventHTMLMediaElement: ended eventHTMLMediaElement: loadedmetadata eventHTMLMediaElement: loadeddata eventHTMLMediaElement: canplay eventHTMLMediaElement: canplaythrough eventHTMLMediaElement: durationchange eventHTMLMediaElement: timeupdate eventHTMLMediaElement: play eventHTMLMediaElement: pause eventHTMLMediaElement: ratechange eventHTMLMediaElement: volumechange eventHTMLMediaElement: suspend eventHTMLMediaElement: emptied eventHTMLMediaElement: stalled event
See Also
HTMLMediaElement: loadeddata event by Mozilla Contributors is licensed under CC-BY-SA 2.5.