Trong lớp học lập trình này, bạn sẽ tìm hiểu cách điều chỉnh nội dung dựa trên chất lượng mạng. Video ở chế độ nền của trang này sẽ chỉ tải khi người dùng có mạng nhanh. Trên các mạng chậm hơn, hình ảnh sẽ tải thay thế.
API Thông tin mạng cho phép bạn truy cập thông tin về chất lượng kết nối của người dùng. Bạn sẽ sử dụng thuộc tính effectiveType
của lớp này để quyết định thời điểm phân phát video và thời điểm phân phát hình ảnh. effectiveType
có thể là 'slow-2g'
, '2g'
, '3g'
hoặc '4g'
.
Bước 1: Kiểm tra loại kết nối
Tệp index.html
chứa thẻ <video>
để hiển thị video ở chế độ nền (dòng 22). Mã trong script.js
tải video bằng cách đặt thuộc tính src
của thẻ video. (Mã tải video được mô tả chi tiết hơn trong Bước 2.)
Để tải video có điều kiện, trước tiên, hãy kiểm tra xem có Network Information API hay không; nếu có, hãy kiểm tra loại kết nối.
- Trong
script.js
, hãy thêm một câu lệnhif
để kiểm tra xem đối tượngnavigator.connection
có tồn tại hay không và đối tượng đó có thuộc tínheffectiveType
hay không. - Thêm câu lệnh
if
để kiểm traeffectiveType
của mạng.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Only load video on the fastest connections.
} else {
// In any other case load the image.
}
}
Gói mã tải video hiện có trong câu lệnh else
để video vẫn tải được trong các trình duyệt không hỗ trợ API Thông tin mạng.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// video loading code
} else {
// image loading code
}
} else {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Bước 2: Tải video
Nếu effectiveType
là '4g'
, hãy sử dụng mã tải video từ đầu lớp học lập trình.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
// image loading code
}
Sau đây là cách hoạt động của mã tải video: ban đầu, thẻ <video>
không tải xuống hoặc hiển thị bất kỳ nội dung nào vì thuộc tính src
của thẻ này chưa được đặt. URL video cần tải được chỉ định bằng thuộc tính data-src
.
<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
Thuộc tính dữ liệu cho phép bạn lưu trữ thêm thông tin về các phần tử HTML tiêu chuẩn. Bạn có thể đặt tên bất kỳ cho phần tử dữ liệu, miễn là tên đó bắt đầu bằng "data-".
Để thực sự hiển thị video trên trang, bạn cần lấy giá trị từ data-src
và đặt giá trị đó làm thuộc tính src
của phần tử video.
Trước tiên, hãy lấy phần tử DOM chứa thành phần:
const video = document.getElementById('coverVideo');
Sau đó, hãy lấy vị trí tài nguyên từ thuộc tính data-src
:
const videoSource = video.getAttribute('data-src');
Cuối cùng, hãy đặt giá trị đó làm thuộc tính src
của phần tử video:
video.setAttribute('src', videoSource);
Dòng cuối cùng sẽ xử lý việc định vị CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
Bước 3: Tải hình ảnh
Để tải hình ảnh có điều kiện trên các mạng chậm hơn, hãy sử dụng chiến lược tương tự như đối với video.
Thêm một phần tử hình ảnh vào index.html
(ngay sau phần tử video) và sử dụng thuộc tính data-src
thay vì thuộc tính src
.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
Trong script.js
, hãy thêm mã để đặt thuộc tính src
của hình ảnh tuỳ thuộc vào effectiveType
của mạng.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
const image = document.getElementById('coverImage');
const imageSource = image.getAttribute('data-src');
image.setAttribute('src', imageSource);
image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Dùng thử
Cách tự kiểm tra:
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình .
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Mạng.
- Nhấp vào trình đơn thả xuống Giới hạn. Theo mặc định, trình đơn này được đặt thành Không giới hạn. Chọn 3G tốc độ cao.
Bây giờ, hãy tải lại trang mà vẫn bật chế độ 3G nhanh. Ứng dụng tải hình ảnh ở chế độ nền thay vì video:
Điểm thưởng: Phản hồi các thay đổi
Bạn có nhớ API này có trình nghe sự kiện onchange
không?
Bạn có thể sử dụng thông tin này cho nhiều việc: tự động điều chỉnh nội dung như chất lượng video; khởi động lại quá trình chuyển dữ liệu bị trì hoãn khi phát hiện thấy sự thay đổi đối với loại mạng có băng thông cao; hoặc thông báo cho người dùng khi chất lượng mạng thay đổi.
Sau đây là ví dụ đơn giản về cách sử dụng trình nghe này. Thêm vào script.js
. Mã này sẽ gọi hàm displayNetworkInfo
bất cứ khi nào thông tin mạng thay đổi.
navigator.connection.addEventListener('change', displayNetworkInfo);
Đã có một phần tử <h2>
trống trên trang index.html
. Bây giờ, hãy xác định hàm displayNetworkInfo
để hiển thị thông tin mạng trong phần tử <h2>
và gọi hàm.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Dưới đây là trạng thái cuối cùng của ứng dụng trên Glitch.
Cách kiểm thử lại:
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình .
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Mạng.
- Nhấp vào trình đơn thả xuống Giới hạn. Theo mặc định, trình đơn này được đặt thành Không giới hạn. Chọn 3G tốc độ cao.
- Tải lại ứng dụng.
Ứng dụng sẽ cập nhật thông tin mạng thành 3g: