Video basierend auf der Netzwerkqualität an die Bildbereitstellung anpassen

In diesem Codelab erfährst du, wie du deine Inhalte an die Qualität des Netzwerks anpassen kannst. Das Hintergrundvideo dieser Seite wird nur geladen, wenn Nutzer eine schnelle Internetverbindung haben. Bei langsameren Netzwerken wird stattdessen ein Bild geladen.

Mit der Network Information API können Sie auf Informationen zur Verbindungsqualität des Nutzers zugreifen. Mit der Property effectiveType legen Sie fest, wann ein Video und wann ein Bild ausgeliefert werden soll. effectiveType kann 'slow-2g', '2g', '3g' oder '4g' sein.

Unterstützte Browser

  • Chrome: 61.
  • Edge: 79.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Schritt 1: Verbindungstyp prüfen

Die index.html-Datei enthält ein <video>-Tag, um das Hintergrundvideo anzuzeigen (Zeile 22). Der Code in script.js lädt das Video, indem das Attribut src des Video-Tags festgelegt wird. Der Code zum Laden des Videos wird in Schritt 2 ausführlicher beschrieben.

Wenn du das Video bedingt laden möchtest, prüfe zuerst, ob die Network Information API verfügbar ist. Ist das der Fall, prüfe den Verbindungstyp.

  1. Fügen Sie in script.js eine if-Anweisung hinzu, die prüft, ob das navigator.connection-Objekt vorhanden ist und die Property effectiveType hat.
  2. Fügen Sie eine if-Anweisung hinzu, um die effectiveType des Netzwerks zu prüfen.
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.
  }
}

Umschließen Sie den vorhandenen Code zum Laden des Videos in einer else-Anweisung, damit das Video auch in Browsern geladen wird, die die Network Information API nicht unterstützen.

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

Schritt 2: Video laden

Wenn effectiveType '4g' ist, verwenden Sie den Code zum Laden des Videos vom Anfang des Codelabs.

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
}

So funktioniert der Code zum Laden von Videos: Das <video>-Tag lädt oder zeigt zuerst nichts an, da das src-Attribut nicht festgelegt ist. Die zu ladende Video-URL wird mit dem data-src-Attribut angegeben.

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

Mit Datenattributen können Sie zusätzliche Informationen zu Standard-HTML-Elementen speichern. Ein Datenelement kann beliebig benannt werden, solange es mit „data-“ beginnt.

Wenn Sie das Video auf der Seite anzeigen möchten, müssen Sie den Wert von data-src abrufen und als src-Attribut des Videoelements festlegen.

Rufe zuerst das DOM-Element ab, das das Asset enthält:

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

Rufe dann den Ressourcenstandort aus dem data-src-Attribut ab:

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

Legen Sie das Attribut schließlich als src-Attribut des Videoelements fest:

video.setAttribute('src', videoSource);

In der letzten Zeile wird die CSS-Positionierung festgelegt:

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

Schritt 3: Bild laden

Wenn du ein Bild bedingt in langsameren Netzwerken laden möchtest, verwende dieselbe Strategie wie für das Video.

Fügen Sie index.html ein Bildelement direkt nach dem Videoelement hinzu und verwenden Sie das Attribut data-src anstelle des Attributs src.

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

Fügen Sie unter script.js Code hinzu, um das src-Attribut des Bilds je nach effectiveType des Netzwerks festzulegen.

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

Jetzt ausprobieren

So testen Sie es selbst:

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Netzwerk.
  4. Klicken Sie auf das Drop-down-Menü Drosselung. Standardmäßig ist Keine Drosselung ausgewählt. Wählen Sie Schnelles 3G aus.

DevTools-Tab „Netzwerk“ mit hervorgehobener Option „Schnelle 3G-Drosselung“

Laden Sie die Seite jetzt noch einmal mit aktivierter schneller 3G-Verbindung neu. Die App lädt ein Bild im Hintergrund anstelle des Videos:

Matrixähnlicher Bildhintergrund mit dem Text-Overlay „Netzwerkinformationen“

Zusätzliche Punkte: Auf Änderungen reagieren

Denken Sie daran, dass diese API einen onchange Ereignis-Listener hat? Sie können es für viele Zwecke verwenden: dynamische Anpassung von Inhalten wie der Videoqualität, Neustart verzögerter Datenübertragungen, wenn eine Änderung zu einem Netzwerktyp mit hoher Bandbreite erkannt wird, oder Benachrichtigungen an Nutzer, wenn sich die Netzwerkqualität ändert.

Hier ein einfaches Beispiel für die Verwendung dieses Listeners. Fügen Sie sie zu script.js hinzu. Mit diesem Code wird die Funktion displayNetworkInfo aufgerufen, sobald sich die Netzwerkinformationen ändern.

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

Auf der Seite index.html ist bereits ein leeres <h2>-Element vorhanden. Definieren Sie nun die Funktion displayNetworkInfo so, dass die Netzwerkinformationen im Element <h2> angezeigt werden, und rufen Sie die Funktion auf.

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

displayNetworkInfo();

Hier ist der endgültige Zustand der App auf Glitch.

Matrixartiger Videohintergrund mit dem Text-Overlay „Netzwerkinformationen 4G“

So testen Sie es noch einmal:

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Netzwerk.
  4. Klicken Sie auf das Drop-down-Menü Drosselung. Standardmäßig ist Keine Drosselung ausgewählt. Wählen Sie Schnelles 3G aus.
  5. Laden Sie die App neu.

Die App aktualisiert die Netzwerkinformationen zu 3G:

Matrixartiger Videohintergrund mit dem Text-Overlay „NETWORK INFORMATION 3g“