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>
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ínhdata-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.