GIFs ohne die .gif: Die wichtigsten Bild- und Videooptionen derzeit

Verabschieden Sie sich von der GIF -Ära! Best Practices für effiziente Webanimation

Verwenden Sie immer noch veraltete GIF -Animationen? Tatsächlich gibt es heutzutage effizientere und bessere Leistungsalternativen! In diesem Artikel wird eingehend untersucht, wie Videoanimationen mit reibungslosen Schleifen mit moderneren Techniken erzielt werden können, wobei die Kompatibilität der Browser und die Benutzererfahrung berücksichtigt werden.

Verwenden Sie HTML <video></video> Element

Verwenden Sie die <video></video> Elemente von HTML, um den GIF -Animationseffekt leicht zu reproduzieren:

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

Dieser Code implementiert eine automatische Wiedergabe von Wiedergabe, Loop -Wiedergabe, Stummschaltung und Inline -Wiedergabe (Vermeiden Sie die Wiedergutmachung der Vollbildmaterial). Die Kompatibilitätsprobleme von Videoformaten können jedoch nicht ignoriert werden.

Videodateien bestehen aus Containern und Video -Codecs (einschließlich Audio- und Audio -Codecs sind auch enthalten). Gemeinsame Videocontainerformate sind MP4 und Webm. Der Browser muss sowohl Container als auch Codecs zum Abspielen von Videos unterstützen.

Der Browser unterstützt Videoformate auf eine Vielzahl von komplexen und vielfältigen Weise. Dies ist einer der Gründe, warum YouTube -eingebettete Videos so beliebt sind. Mal sehen, welche Videoformate es wert sind, nachzudenken:

Containerformat:

• MP4: Seit seiner Veröffentlichung im Jahr 2001 wurde es von fast allen Browsern unterstützt.
• Webm: Veröffentlicht im Jahr 2010, mit Ausnahme von iOS Safari, und andere Browser unterstützen es.

CodeCode:

• H.264: Alle Browser unterstützen es.
• HEVC/H.265: Der Nachfolger von H.264, unterstützt von Safari, Edge und Chrome (Version 105 und höher).
• VP9: Der Nachfolger von VP8, unterstützt von allen Browsern, die WebM unterstützen.
• av1: Chrome wird seit 2018 unterstützt, Firefox wird seit 2019 unterstützt, und Edge und Safari wurden noch nicht unterstützt.

MP4 -Dateien mit H.264 -Codierung haben die beste Kompatibilität, aber die Qualität und Dateigröße sind nicht die beste. Obwohl die Kompatibilität von AV1 noch nicht perfekt ist, sind YouTube und Vimeo in einigen Videos bereits hoch.

Um die alten und neuen Browser zu berücksichtigen, können Sie mehrere <source></source> Elemente verwenden, die Bezeichnung der idealen Quelldatei priorisieren und dann nacheinander Alternativen hinzufügen:

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Wenn Sie mehrere MP4 -Dateien mit verschiedenen Codecs verwenden müssen, müssen Sie komplexe codecs Parameter verwenden.

Die meisten Videobearbeitungssoftware unterstützt keinen direkten Export von AV1- oder Webm -Formaten und erfordert die Konvertierung mithilfe von Tools wie FFMPEG:

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

GIF in MP4 konvertieren:

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

Verwenden des Videos als Hintergrund und Überlagern anderer Elemente erfordert eine CSS -Positionierung:

.video-parent {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.video-parent video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

Ein Nachteil von

<video></video> Elementen besteht darin, dass sie verhindern, dass der Bildschirm den Winterschlaf ist.

Die Vorteile von Bildern: Webp und AVIF

Die Verwendung animierter Webp- oder AVIF -Bildformate hat die folgenden Vorteile:

• verschiedene Animationsbilder können für unterschiedliche Bildschirmgrößen oder Themenmodi (z. B. Dunkelmodus) verwendet werden.
• native Unterstützung für faules Laden: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">
• einfacher als Hintergrundbild zu verwenden: background-image: url("coolbackground.webp");

Es kann verwendet werden <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

(Die Form ist weggelassen, dasselbe wie die ursprüngliche Form)

Verwenden von Animation avif

AVIF -Format (2019 veröffentlicht) ist eines der besten Bildformate, das GIF in AVIF konvertiert

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

AVIF basiert auf AV1 -Video -Codec und unterstützt statische und Animationsbilder.

(Die Form ist weggelassen, dasselbe wie die ursprüngliche Form)

Verwenden Sie

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now "> Dies kann Effekte wie Videohintergrund oder Grenzbilder in Safari erzielen:

Safari behauptet, diese Funktion habe Leistungsvorteile, aber Chrome hat deutlich gemacht, dass sie sie nicht unterstützen wird.

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

respektieren Benutzerpräferenzen

Videoelemente respektieren die Autoplay -Einstellungen des Benutzers automatisch und die Einstellungen "Animation reduzieren".

Überprüfen Sie die progressive Verbesserung

Die Unterstützung für AVIF- und WebP -Formate kann mithilfe von Chrome Devtools '"Rendering" -Berbenbuchstaben ausgeschaltet werden, um die Codekompatibilität zu testen.

Lottie Animationsbibliothek

Lottie ist eine Open -Source -Animationsbibliothek, die Animationsdaten (JSON -Dateien) aus After Effects exportiert und auf eine Webseite überträgt. Es unterstützt mehrere Plattformen und bietet flexible Steuerungsoptionen wie Wiedergabe, Pause, Reverse -Wiedergabe usw.

Die Leistung von

Lottie hängt von der Größe der Bibliothek und der JSON -Dateigröße und der Anzahl der generierten DOM -Elemente ab.

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Schlussfolgerung: Es gibt keine absolut beste Lösung, und die Auswahl muss basierend auf spezifischen Bedürfnissen und Projektbedingungen abgewogen werden.

Das obige ist der detaillierte Inhalt vonGIFs ohne die .gif: Die wichtigsten Bild- und Videooptionen derzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!