Điều chỉnh video cho việc phân phát hình ảnh dựa trên chất lượng mạng

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 đang sử dụng mạng có tốc độ nhanh. Trên các mạng chậm hơn, hệ thống sẽ tải một hình ảnh.

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 để 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'.

Hỗ trợ trình duyệt

  • Chrome: 61.
  • Edge: 79.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nguồn

Bước 1: Kiểm tra loại kết nối

Tệp index.html chứa thẻ <video> để hiển thị video nền (dòng 22). Mã trong script.js tải video bằng cách thiết lập 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.

  1. Trong script.js, hãy thêm một câu lệnh if để kiểm tra xem đối tượng navigator.connection có tồn tại hay không và đối tượng đó có thuộc tính effectiveType hay không.
  2. Thêm câu lệnh if để kiểm tra effectiveType 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'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 quan tâm đến 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:

  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào Toàn màn hình toàn màn hình.
  2. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
  3. Nhấp vào thẻ Mạng.
  4. 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.

Thẻ Mạng trong Công cụ của Chrome cho nhà phát triển, trong đó tuỳ chọn Điều tiết mạng 3G nhanh được làm nổi bật

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:

Phông nền hình ảnh giống như ma trận với lớp phủ văn bản &quot;NETWORK INFORMATION&quot; (THÔNG TIN MẠNG)

Đ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.

Dưới đây là một 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);

Hiện đã có 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.

Hình nền video giống như trong The Matrix với lớp phủ văn bản &quot;NETWORK INFORMATION 4g&quot; (THÔNG TIN MẠNG 4G)

Cách kiểm tra lại:

  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.
  2. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
  3. Nhấp vào thẻ Mạng.
  4. 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.
  5. Tải lại ứng dụng.

Ứng dụng sẽ cập nhật thông tin mạng thành 3g:

Nền video giống như trong The Matrix có lớp phủ văn bản &quot;NETWORK INFORMATION 3g&quot; (THÔNG TIN MẠNG 3G)