Đ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

Milica Mihajlija

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 nền của trang này sẽ chỉ tải khi người dùng đang sử dụng mạng nhanh. Trên các mạng chậm hơn, hình ảnh sẽ tải.

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

  • 61
  • 79
  • x
  • x

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 đặ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 theo điều kiện, trước tiên, hãy kiểm tra xem API thông tin mạng có hoạt động 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 câu lệnh if để kiểm tra xem đối tượng navigator.connection có tồn tại và 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 sẽ tải 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
}

Dưới đây là cách hoạt động của mã tải video: thẻ <video> không tải xuống hoặc hiển thị bất kỳ nội dung nào lúc đầu do thuộc tính src của thẻ chưa được đặt. URL của video cần tải được chỉ định bằng thuộc tính data-src.

<video id="coverVideo" 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 cho một phần tử dữ liệu bất kỳ, miễn là phần tử đó 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 nội dung:

const video = document.getElementById('coverVideo');

Sau đó, 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 đảm nhận vị trí CSS:

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

Bước 3: Tải hình ảnh

Để tải có điều kiện một hình ảnh trên các mạng chậm hơn, hãy sử dụng cùng một chiến lược như đối với video.

Thêm một thành phần hình ảnh vào index.html (ngay sau thành phần 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 View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).
  2. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
  3. Nhấp vào thẻ Mạng.
  4. Nhấp vào trình đơn thả xuống Điều tiết, được đặt thành Không điều tiết theo mặc định. Chọn 3G nhanh.

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

Bây giờ, hãy tải lại trang khi vẫn bật tính năng 3G nhanh. Ứng dụng tải hình ảnh trong nền thay vì video:

Nền hình ảnh giống ma trận với lớp phủ văn bản &quot;THÔNG TIN MẠNG&quot;

Ghi nhận sự đóng góp bổ sung: 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 API này cho nhiều mục đích: tự động điều chỉnh nội dung, chẳng hạn 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 thay đổi đối với loại mạng 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à 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);

Đã 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();

Đây là trạng thái cuối cùng của ứng dụng trên Glitch.

Nền video giống như ma trận với lớp phủ văn bản &quot;THÔNG TIN MẠNG 4g&quot;

Cách kiểm tra lại:

  1. Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).
  2. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
  3. Nhấp vào thẻ Mạng.
  4. Nhấp vào trình đơn thả xuống Điều tiết, được đặt thành Không điều tiết theo mặc định. Chọn 3G nhanh.
  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ư ma trận với lớp phủ văn bản &quot;THÔNG TIN MẠNG 3g&quot;