Thực thi script khi trình duyệt đang tải dữ liệu media (onprogress) trong HTML?

Sự kiện onprogress kích hoạt định kỳ trong quá trình tải dữ liệu media (video/audio). Dùng để hiển thị tiến trình tải (loading bar), khác với onloadeddata (chỉ khung đầu).

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <video id="myVideo" width="320" height="176" controls onprogress="display()">
      <source src="/html5/foo.ogg" type="video/ogg" />
      <source src="/html5/foo.mp4" type="video/mp4" />
      Trình duyệt không hỗ trợ HTML5 video.
    </video>
    <script>
      function display() {
        console.log("Đang tải...", document.getElementById('myVideo').buffered);
      }
    </script>
  </body>
</html>

Buffered Range

Dùng video.buffered (TimeRanges) để biết phần nào đã tải:

const video = document.querySelector('video');
video.addEventListener('progress', () => {
  if (video.buffered.length > 0) {
    const bufferedEnd = video.buffered.end(video.buffered.length - 1);
    const percent = (bufferedEnd / video.duration) * 100;
    console.log(`Đã tải: ${percent.toFixed(1)}%`);
  }
});

Các sự kiện tải media (thứ tự)

1. loadstart
2. durationchange
3. loadedmetadata
4. progress (lặp lại nhiều lần)
5. canplay
6. canplaythrough

Lưu ý

• progress cũng có trên <audio> và XMLHttpRequest/fetch (upload/download).
• Không kích hoạt nếu media cached (đã tải trước).