Dostosowanie filmu do wyświetlania obrazów na podstawie jakości sieci

Z tego ćwiczenia w Codelabs dowiesz się, jak dostosować treści zależnie od jakości sieci. Film tła na tej stronie będzie wczytywać się tylko wtedy, gdy użytkownicy korzystają z szybkiej sieci. W przypadku wolniejszych sieci zamiast tego wczytywane jest zdjęcie.

Interfejs Network Information API umożliwia uzyskanie dostępu do informacji o jakości połączenia użytkownika. Na podstawie właściwości effectiveType decydujesz, kiedy wyświetlić film, a kiedy obraz. effectiveType może mieć wartość 'slow-2g', '2g', '3g' lub '4g'.

Obsługa przeglądarek

  • Chrome: 61.
  • Edge: 79.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Krok 1. Sprawdź typ połączenia

Plik index.html zawiera tag <video>, który wyświetla film tła (wiersz 22). Kod w pliku script.js wczytuje film, ustawiając atrybut src tagu wideo. (kod wczytywania filmu jest bardziej szczegółowo opisany w kroku 2).

Aby wczytać film warunkowo, najpierw sprawdź, czy interfejs Network Information API jest dostępny. Jeśli tak, sprawdź typ połączenia.

  1. W script.js dodaj instrukcję if, która sprawdza, czy obiekt navigator.connection istnieje i czy ma właściwość effectiveType.
  2. Dodaj instrukcję if, aby sprawdzić effectiveType sieci.
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.
  }
}

Aby film był nadal ładowany w przeglądarkach, które nie obsługują interfejsu Network Information API, dodaj istniejący kod wczytywania filmu w instrukcję else.

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');
}

Krok 2. Wczytaj film

Jeśli effectiveType to '4g', użyj kodu wczytywania filmu z początku ćwiczeń z programowania.

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
}

Oto jak działa kod wczytywania filmu: tag <video> nie pobiera ani nie wyświetla niczego na początku, ponieważ jego atrybut src nie jest ustawiony. Adres URL filmu do załadowania jest określony za pomocą atrybutu 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>

Atrybuty danych umożliwiają przechowywanie dodatkowych informacji o standardowych elementach HTML. Element danych może mieć dowolną nazwę, o ile zaczyna się od „data-”.

Aby faktycznie wyświetlić film na stronie, musisz pobrać wartość z elementu data-src i ustawić ją jako atrybut src elementu wideo.

Najpierw pobierz element DOM zawierający zasób:

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

Następnie pobierz lokalizację zasobu z atrybutu data-src:

const videoSource = video.getAttribute('data-src');

Na koniec ustaw go jako atrybut src elementu wideo:

video.setAttribute('src', videoSource);

Ostatni wiersz zajmuje się pozycjonowaniem CSS:

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

Krok 3. Załaduj obraz

Aby warunkowo wczytywać obrazy w przypadku wolniejszych sieci, zastosuj tę samą strategię co w przypadku filmów.

Dodaj element obrazu do index.html (zaraz po elemencie wideo) i użyj atrybutu data-src zamiast atrybutu src.

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

W pliku script.js dodaj kod, aby ustawić atrybut src obrazu w zależności od effectiveType sieci.

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');
}

Wypróbuj

Aby przetestować tę funkcję:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekranpełny ekran.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  3. Kliknij kartę Sieć.
  4. Kliknij menu Ograniczanie, które domyślnie jest ustawione na Brak ograniczania. Wybierz Szybkie 3G.

Karta Sieć w Narzędziach deweloperskich z wyróżnioną opcją ograniczania przy szybkim połączeniu 3G

Teraz ponownie załaduj stronę, gdy szybkie połączenie 3G jest nadal włączone. Aplikacja wczytuje obraz w tle zamiast filmu:

Tło obrazu matrycowego z nakładką tekstową „INFORMACJE O SIECI”

Dodatkowe punkty: reagowanie na zmiany

Pamiętasz, jak ten interfejs API ma detektor zdarzeń onchange? Umożliwia dynamiczne dostosowywanie treści (np. jakość wideo), ponowne uruchamianie odroczonych transferów danych w przypadku wykrycia zmiany na typ sieci o dużej przepustowości oraz powiadamianie użytkowników o zmianie jakości sieci.

Oto prosty przykład użycia tego odbiornika. Dodaj ją do script.js. Ten kod wywoła funkcję displayNetworkInfo, gdy tylko zmienią się informacje o sieci.

navigator.connection.addEventListener('change', displayNetworkInfo);

Na stronie index.html jest już pusty element <h2>. Zdefiniuj teraz funkcję displayNetworkInfo, aby wyświetlała informacje o sieci w elemencie <h2>, i wywołaj tę funkcję.

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

Oto końcowy stan aplikacji na Glitch.

Tło wideo w stylu matrycowym z nakładką tekstową „INFORMACJE O SIECI 4G”

Aby przetestować to ponownie:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekranpełny ekran.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  3. Kliknij kartę Sieć.
  4. Kliknij menu Ograniczanie, które jest domyślnie ustawione na Bez ograniczania. Wybierz Szybkie 3G.
  5. Ponownie załaduj aplikację.

Aplikacja zaktualizuje informacje o sieci do 3g:

Tłoto filmowe w stylu Matrixa z nałożonym tekstem „NETWORK INFORMATION 3g”