Trang này được dịch bởi Cloud Translation API.

Video tải từng phần

Jeremy Wagner

Rachel Andrew

Tương tự như với thành phần hình ảnh, bạn cũng có thể tải từng phần video. Video thường được tải bằng phần tử <video> (mặc dù phương thức thay thế đang sử dụng <img> có xuất hiện với việc triển khai hạn chế). Cách tải từng phần <video> phụ thuộc vào trường hợp sử dụng. Hãy cùng thảo luận một số trường hợp mà mỗi tình huống yêu cầu giải pháp khác.

Đối với video không tự động phát

Đối với những video mà quá trình phát là do người dùng thực hiện (tức là những video không tự động phát), chỉ định preload thuộc tính trên phần tử <video>.

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

Lưu ý quan trọng: Hình ảnh poster dạng video có thể đủ điều kiện là ứng viên LCP. Nếu hình ảnh poster của bạn là đề xuất LCP, bạn nên tải trước hình ảnh với giá trị thuộc tính fetchpriority là "high" để người dùng nhìn thấy hình ảnh sớm nhất có thể.

Ví dụ trên sử dụng thuộc tính preload có giá trị none để ngăn trình duyệt bằng cách tải trước bất kỳ dữ liệu video nào. poster cung cấp cho phần tử <video> một phần giữ chỗ sẽ chiếm không gian khi video tải. Lý do là các hành vi mặc định để tải video có thể khác nhau giữa các trình duyệt:

Trong Chrome, chế độ mặc định cho preload trước đây là auto, nhưng kể từ Chrome 64 thì chế độ này hiện tại mặc định là metadata. Mặc dù vậy, trên phiên bản Chrome dành cho máy tính, một phần của Bạn có thể tải trước video bằng tiêu đề Content-Range. Các trình duyệt dựa trên Chromium và Firefox khác hoạt động tương tự nhau.
Giống như Chrome trên máy tính để bàn, phiên bản Safari 11.0 dành cho máy tính sẽ tải trước một phạm vi của video. Từ phiên bản 11.2, hệ thống chỉ tải trước siêu dữ liệu của video. Trong Safari trên iOS, video không bao giờ tải trước.
Khi Chế độ tiết kiệm dữ liệu được bật được bật, preload mặc định là none.

Do các hành vi mặc định của trình duyệt liên quan đến preload không được thiết lập, phản cảm có lẽ là lựa chọn tốt nhất dành cho bạn. Trong trường hợp này, khi người dùng bắt đầu phát lại, sử dụng preload="none" là cách dễ nhất để trì hoãn việc tải video trên tất cả nền tảng. Thuộc tính preload không phải là cách duy nhất để trì hoãn việc tải nội dung video. Phát lại nhanh cùng video Việc tải trước có thể giúp bạn một số ý tưởng và thông tin chi tiết về cách làm việc với tính năng phát lại video trong JavaScript.

Rất tiếc, tính năng này không hữu ích khi bạn muốn sử dụng video thay cho ảnh động GIF sẽ được đề cập tiếp theo.

Đối với video hoạt động như thay thế ảnh GIF động

Mặc dù ảnh GIF động được sử dụng rộng rãi, nhưng ảnh GIF động này chưa đủ rõ ràng so với ảnh GIF tương đương trong video. nhiều cách, đặc biệt là về kích thước tệp. Ảnh GIF động có thể kéo dài đến phạm vi vài megabyte dữ liệu. Video có chất lượng hình ảnh tương tự nhau có xu hướng nhỏ hơn nhiều.

Việc sử dụng phần tử <video> để thay thế cho ảnh GIF động không phải là đơn giản dưới dạng phần tử <img>. Ảnh GIF động có ba đặc điểm:

Các quảng cáo này sẽ tự động phát khi được tải.
Chúng lặp lại liên tục (mặc dù không phải lúc nào cũng viết hoa).
Họ không có bản âm thanh.

Để thực hiện điều này với phần tử <video>, bạn sẽ thấy như sau:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

Các thuộc tính autoplay, muted và loop là phần tự giải thích. playsinline là cần thiết để quá trình tự động phát diễn ra trong iOS. Giờ đây, bạn có một thay thế video dưới dạng GIF có thể phục vụ hoạt động trên các nền tảng. Nhưng làm thế nào để thực hiện về việc tải từng phần? Để bắt đầu, hãy sửa đổi mã đánh dấu <video> cho phù hợp:

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

Bạn sẽ nhận thấy có thêm poster , Tính năng này cho phép bạn chỉ định một phần giữ chỗ để chiếm không gian của phần tử <video> cho đến khi video được tải từng phần. Tương tự như các ví dụ về tải từng phần <img>, lưu trữ URL video trong thuộc tính data-src trên mỗi <source> . Từ đó, hãy sử dụng mã JavaScript tương tự như Ví dụ về tính năng tải từng phần hình ảnh dựa trên Giao diện với Trình quan sát:

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

Khi tải từng phần một phần tử <video>, bạn cần lặp lại qua tất cả phần tử con Các phần tử <source> và lật thuộc tính data-src của các phần tử này sang các thuộc tính src. Một lần bạn đã làm điều đó, bạn cần kích hoạt quá trình tải video bằng cách gọi lệnh gọi hàm phương thức load của phần tử, sau đó nội dung nghe nhìn sẽ bắt đầu phát tự động cho mỗi thuộc tính autoplay.

Khi sử dụng phương pháp này, bạn sẽ có một giải pháp video mô phỏng hoạt động của ảnh GIF động, nhưng không phải chịu mức sử dụng dữ liệu chuyên sâu như GIF động, và bạn có thể tải từng phần nội dung đó.

Thư viện tải từng phần

Các thư viện sau đây có thể giúp bạn tải từng phần video:

vanilla-lazyload và lozad.js là các lựa chọn siêu nhẹ chỉ sử dụng Giao diện Đối tượng tiếp nhận dữ liệu. Vì vậy, chúng mang lại hiệu suất cao, nhưng sẽ cần được chèn polyfill trước khi bạn có thể sử dụng chúng trên các trình duyệt cũ hơn.
yall.js là một thư viện sử dụng Intersection Observer và quay lại dùng trình xử lý sự kiện. Ứng dụng này cũng có thể tải từng phần hình ảnh video poster bằng cách sử dụng thuộc tính data-poster.
Nếu cần một thư viện tải từng phần dành riêng cho React, bạn có thể cân nhắc react-lazyload. Trong khi không dùng Intersection Observer mà cung cấp một phương thức quen thuộc để chạy từng phần tải hình ảnh cho những người đã quen với việc phát triển ứng dụng bằng React.

Mỗi thư viện tải từng phần này đều được lập tài liệu chi tiết, với nhiều mã đánh dấu các mẫu cho nhiều hoạt động tải từng phần của bạn.