Video basierend auf der Netzwerkqualität an die Bildbereitstellung anpassen

Milica Mihajlija

Wenn du diesem Codelab folgen möchtest, öffne diesen Glitch in einem zweiten Tab.

Hinweis : In diesem Codelab werden die Chrome-Entwicklertools verwendet. Laden Sie Chrome herunter, falls Sie das noch nicht getan haben.

In diesem Codelab erfahren Sie, wie Sie Ihre Inhalte je nach Netzwerkqualität anpassen. Das Hintergrundvideo dieser Seite wird nur geladen, wenn sich Nutzer in einem schnellen Netzwerk befinden. In 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 Eigenschaft effectiveType legen Sie fest, wann ein Video und wann ein Bild bereitgestellt werden soll. effectiveType kann 'slow-2g', '2g', '3g' oder '4g' sein.

Unterstützte Browser

• 61
• 79
• x
• x

Quelle

Schritt 1: Verbindungstyp prüfen

Die Datei index.html enthält ein <video>-Tag zur Anzeige des Hintergrundvideos (Zeile 22). Mit dem Code in script.js wird das Video geladen, indem das Attribut src des Video-Tags festgelegt wird. Der Code zum Laden des Videos wird in Schritt 2 ausführlicher beschrieben.

Um das Video bedingt zu laden, prüfen Sie zuerst, ob die Network Information API verfügbar ist. Ist dies der Fall, überprüfen Sie den Verbindungstyp.

1. Fügen Sie in script.js eine if-Anweisung hinzu, die prüft, ob das Objekt navigator.connection vorhanden ist und ob es das Attribut 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 eine else-Anweisung, damit das Video weiterhin 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 den Wert '4g' hat, verwende den Code zum Laden des Videos vom Anfang des Codelab.

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: Über das <video>-Tag wird nichts heruntergeladen oder angezeigt, da das src-Attribut nicht festgelegt ist. Die zu ladende Video-URL wird mit dem Attribut data-src angegeben.

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

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

Damit das Video tatsächlich auf der Seite angezeigt wird, müssen Sie den Wert von data-src abrufen und als src-Attribut des Videoelements festlegen.

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

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

Rufen Sie dann den Ressourcenstandort aus dem Attribut data-src ab:

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

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

video.setAttribute('src', videoSource);

Die letzte Zeile kümmert sich um die CSS-Positionierung:

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

Schritt 3: Bild laden

Um ein Bild in langsameren Netzwerken bedingt zu laden, verwenden Sie dieselbe Strategie wie für das Video.

Fügen Sie index.html direkt nach dem Videoelement ein Bildelement 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üge in script.js Code hinzu, um das src-Attribut des Bildes abhängig vom 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');
}

Ausprobieren

So testen Sie es selbst:

1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
3. Klicken Sie auf den Tab Netzwerk.
4. Klicken Sie auf das Drop-down-Menü Drosselung, das standardmäßig auf Keine Drosselung eingestellt ist. Wählen Sie Schnelles 3G aus.

Aktualisiere jetzt die Seite mit aktiviertem Fast 3G. Die App lädt im Hintergrund anstelle des Videos ein Bild:

Zusätzlicher Beitrag: Auf Änderungen reagieren

Sie erinnern sich, wie diese API einen onchange-Ereignis-Listener hat. Du kannst es für viele Dinge verwenden: zum dynamischen Anpassen von Inhalten wie der Videoqualität, zum Neustarten verzögerter Datenübertragungen, wenn eine Änderung zu einem Netzwerktyp mit hoher Bandbreite erkannt wird, oder zum Benachrichtigen der Nutzer, wenn sich die Netzwerkqualität ändert.

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

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

Auf der Seite index.html gibt es bereits ein leeres <h2>-Element. Definieren Sie nun die Funktion displayNetworkInfo so, dass sie die Netzwerkinformationen im Element <h2> anzeigt, 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.

So testen Sie es noch einmal:

1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
3. Klicken Sie auf den Tab Netzwerk.
4. Klicken Sie auf das Drop-down-Menü Drosselung, das standardmäßig auf Keine Drosselung eingestellt ist. Wählen Sie Schnelles 3G aus.
5. Aktualisieren Sie die App.

Die App aktualisiert die Netzwerkinformationen zu 3G: