HTMLMediaElement: progress event

The progress event is fired periodically as the browser loads a resource.

Bubbles No
Cancelable No
Interface Event
Event handler property onprogress

Examples

Live example

HTML

<div class="example">

    <button type="button">Load video</button>
    <video controls width="250"></video>

    <div class="event-log">
        <label>Event log:</label>
        <textarea readonly class="event-log-contents"></textarea>
    </div>

</div>

JavaScript

const loadVideo = document.querySelector('button');
const video = document.querySelector('video');
const eventLog = document.querySelector('.event-log-contents');
let source = null;

function handleEvent(event) {
    eventLog.textContent = eventLog.textContent + `${event.type}\n`;
}

video.addEventListener('loadstart', handleEvent);
video.addEventListener('progress', handleEvent);
video.addEventListener('canplay', handleEvent);
video.addEventListener('canplaythrough', handleEvent);

loadVideo.addEventListener('click', () => {

    if (source) {
        document.location.reload();
    } else {
        loadVideo.textContent = "Reset example";
        source = document.createElement('source');
        source.setAttribute('src', 'https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4');
        source.setAttribute('type', 'video/mp4');

        video.appendChild(source);
    }
});

Result

Specifications

Specification Status
HTML Living Standard
The definition of 'progress media event' in that specification.
Living Standard
HTML5
The definition of 'progress media event' in that specification.
Recommendation

Browser compatibility

BCD tables only load in the browser

See also