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 Informationen zur Verbindungsqualität des Nutzers abrufen. 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.
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.
- Fügen Sie in
script.js
eineif
-Anweisung hinzu, die prüft, ob dasnavigator.connection
-Objekt vorhanden ist und die PropertyeffectiveType
hat. - Fügen Sie eine
if
-Anweisung hinzu, um dieeffectiveType
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 des Videos: Beim <video>
-Tag wird zuerst nichts heruntergeladen oder angezeigt, da sein 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 aus 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');
Rufen Sie dann den Ressourcenstandort aus dem Attribut data-src
ab:
const videoSource = video.getAttribute('data-src');
Legen Sie das Attribut schließlich als src
-Attribut des Videoelements fest:
video.setAttribute('src', videoSource);
Die letzte Zeile übernimmt die CSS-Positionierung:
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:
- Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Klicken Sie auf das Drop-down-Menü Drosselung, das standardmäßig auf Keine Drosselung eingestellt ist. Wählen Sie Schnelles 3G aus.
Aktualisieren Sie nun die Seite, während schnelles 3G aktiviert ist. Die App lädt ein Bild im Hintergrund anstelle des Videos:
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 Benachrichtigung von Nutzern, 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 displayNetworkInfo
-Funktion, damit die Netzwerkinformationen im <h2>
-Element 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.
So testen Sie es noch einmal:
- Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Klicken Sie auf das Drop-down-Menü Drosselung. Standardmäßig ist Keine Drosselung ausgewählt. Wählen Sie Schnelles 3G aus.
- Laden Sie die App neu.
Die App aktualisiert die Netzwerkinformationen zu 3G: