Tránh tải lại video HTML5 lặp lại trên cùng trang

Để trình duyệt tải trước (preload) video ngay khi trang load, tránh việc tải lại nhiều lần khi người dùng tương tác, hãy sử dụng thuộc tính preload="auto" trên thẻ <video>.

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <video width="350" height="200" controls preload="auto">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      Trình duyệt của bạn không hỗ trợ thẻ video.
    </video>
  </body>
</html>

Giá trị của preload

• auto: Tải toàn bộ video sẵn (mặc định của hầu hết trình duyệt).
• metadata: Chỉ tải siêu dữ liệu (kích thước, độ dài, khung hình đầu).
• none: Không tải trước, chờ người dùng nhấn play.

Sử dụng preload="auto"> phù hợp khi bạn chắc chắn người dùng sẽ xem video, giúp phát ngay lập tức mà không chờ đợi.