GIFs durch Video ersetzen

Rob Dodson

In diesem Codelab verbessern Sie die Leistung, indem Sie ein animiertes GIF durch ein Video ersetzen.

Zuerst messen

Messen Sie zuerst die Leistung der Website:

  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 Lighthouse.
  4. Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien ausgewählt ist.
  5. Klicken Sie auf die Schaltfläche Bericht generieren.

Wenn Sie fertig sind, sollte Lighthouse das GIF in der Prüfung „Videoformate für animierte Inhalte verwenden“ als Problem gekennzeichnet haben.

FFmpeg herunterladen

Es gibt verschiedene Möglichkeiten, GIFs in Videos umzuwandeln. In diesem Leitfaden wird FFmpeg verwendet. Es ist bereits in der Glitch-VM installiert. Wenn Sie möchten, können Sie dieser Anleitung folgen, um es auch auf Ihrem lokalen Computer zu installieren.

Konsole öffnen

Prüfe, ob FFmpeg installiert und funktionsfähig ist:

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  2. Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
  3. Führen Sie in der Console Folgendes aus:
which ffmpeg

Sie sollten einen Dateipfad zurückerhalten:

/usr/bin/ffmpeg

GIF in Video umwandeln

  • Führen Sie in der Console cd images aus, um das Verzeichnis „images“ aufzurufen.
  • Führen Sie ls aus, um den Inhalt aufzurufen.

Auf dem Bildschirm sollte Folgendes zu sehen sein:

$ ls
cat-herd.gif
  • Führen Sie in der Console Folgendes aus:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Dadurch wird FFmpeg angewiesen, die Eingabe, gekennzeichnet durch das Flag -i, von „cat-herd.gif“ in ein Video mit dem Namen „cat-herd.mp4“ zu konvertieren. Das sollte nur eine Sekunde dauern. Wenn der Befehl abgeschlossen ist, sollten Sie ls noch einmal eingeben können und zwei Dateien sehen:

$ ls
cat-herd.gif  cat-herd.mp4

WebM-Videos erstellen

MP4 gibt es bereits seit 1999, WebM ist dagegen ein relativ neuer Standard, der erst 2010 veröffentlicht wurde. WebM-Videos können viel kleiner als MP4-Videos sein. Daher ist es sinnvoll, beide zu generieren. Glücklicherweise kannst du dem <video>-Element mehrere Quellen hinzufügen. Wenn ein Browser also WebM nicht unterstützt, kann er auf MP4 zurückgreifen.

  • Führen Sie in der Console Folgendes aus:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • So prüfen Sie die Dateigrößen:
ls -lh

Du solltest ein GIF und zwei Videos haben:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

Das Original-GIF hat eine Größe von 3, 7 MB, während die MP4-Version 551 KB und die WebM-Version nur 341 KB hat. Das ist eine enorme Ersparnis.

HTML aktualisieren, um GIF-Effekt neu zu erstellen

Animierte GIFs haben drei wichtige Eigenschaften, die Videos nachahmen müssen:

  • Sie werden automatisch abgespielt.
  • Sie werden in der Regel in einer Endlosschleife wiedergegeben, was sich aber auch verhindern lässt.
  • Sie sind leise.

Glücklicherweise können Sie diese Verhaltensweisen mit dem Element <video> nachbilden.

  • Ersetzen Sie in der Datei index.html die Zeile mit <img> durch Folgendes:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Ein <video>-Element mit diesen Attributen wird automatisch abgespielt, endlos wiederholt, ohne Ton und im Inline-Modus (d. h. nicht im Vollbildmodus). 🎉

Quellen angeben

Jetzt müssen Sie nur noch Ihre Videoquellen angeben. Das <video>-Element erfordert mindestens ein untergeordnetes <source>-Element, das auf verschiedene Videodateien verweist, aus denen der Browser je nach Formatunterstützung auswählen kann. Ersetze die <video> durch <source>-Elemente, die zu deinen Videos mit Katzenherden verlinken:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Vorschau

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Die Darstellung sollte gleich bleiben. So weit, so gut.

Mit Lighthouse bestätigen

Öffnen Sie die Live-Website.

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Lighthouse.
  3. Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien ausgewählt ist.
  4. Klicken Sie auf die Schaltfläche Bericht generieren.

Die Prüfung „Videoformate für animierte Inhalte verwenden“ sollte jetzt bestanden werden. Endlich! 💪