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

Milica Mihajlija

Z tego ćwiczenia w Codelabs dowiesz się, jak dostosować treści w zależności od sieci jakości. Film w tle tej strony zostanie wczytany tylko wtedy, gdy użytkownicy bardzo szybko W wolniejszych sieciach będzie wczytywany obraz.

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

Krok 1. Sprawdź typ połączenia

Plik index.html zawiera tag <video> wyświetlający film w tle (wiersz 22). Kod w tagu script.js wczytuje film, ustawiając atrybut src tagu wideo. (Więcej informacji na temat kodu wczytywania filmu znajdziesz w kroku 2).

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

1. W narzędziu 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.
  }
}

Opakuj istniejący kod wczytywania filmu w instrukcji else, tak by film nadal wczytują się w przeglądarkach, które nie obsługują interfejsu Network Information API.

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 na początku ćwiczenia.

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
}

Tak działa kod wczytywania filmu: tag <video> na początku niczego nie pobiera ani nie wyświetla, ponieważ jego atrybut src nie został ustawiony. Adres URL filmu do wczytania jest podany w atrybucie 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>

Atrybuty danych umożliwiają przechowywanie dodatkowych informacji w standardowych elementach HTML. Element danych może mieć dowolną nazwę, ale musi 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');

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. Wczytaj obraz

Aby warunkowo ładować obraz w wolniejszych sieciach, użyj tej samej strategii, co w przypadku w filmie.

Dodaj do elementu index.html element graficzny (zaraz za elementem wideo) i użyj 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 narzędziu 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 to zrobić:

1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Sieć.
4. Kliknij menu Ograniczanie, które jest domyślnie ustawione na Bez ograniczania. Wybierz Szybka sieć 3G.

Załaduj ponownie stronę z włączoną funkcją Szybkie 3G. Aplikacja wczytuje obraz w tle zamiast filmu:

Dodatkowe środki: reaguj na zmiany

Pamiętaj, że ten interfejs API ma atrybut onchange detektora zdarzeń? Pozwala dynamicznie dostosowywać treści, np. jakość filmu, ponowne uruchomienie odroczonych danych przesyłanych po wykryciu zmiany na typ sieci o dużej przepustowości; lub powiadamianie użytkowników o zmianie jakości sieci.

Oto prosty przykład użycia tego odbiornika. Dodaj do script.js. Ten kod będzie wywoływać funkcję displayNetworkInfo za każdym razem, gdy sieć zmian informacji.

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

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

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

displayNetworkInfo();

Oto końcowy stan aplikacji w usłudze Glitch.

Aby przetestować go ponownie:

1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Sieć.
4. Kliknij menu Ograniczanie, które jest domyślnie ustawione na Bez ograniczania. Wybierz Szybka sieć 3G.
5. Załaduj ponownie aplikację.

Aplikacja zaktualizuje informacje o sieci do 3g: