Artikel-Hilfsmenü
Montag, 26. Februar 2018 – aktualisiert am Donnerstag, 9. Januar 2020
Animated Gifs durch Video ersetzen, Bandbreite sparen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Dieser Artikel ist veraltet, und durch diesen Artikel ersetzt. Es hat sich gezeigt, dass das hier verwendete JavaScript nicht nur massive Stabiltätsprobleme bereitet, sondern tatsächlich entbehrlich ist.
Die obige Animation eines Kugelstoßpendels sieht aus wie ein animated GIF. Diese spontane Einschätzung ist der Tatsache geschuldet, dass animated GIFs seit einiger Zeit im Web fröhliche Urständ feiern. Sehr zur Freude der Internet Service Provider (ISP), "wiegt" doch so ein animated GIF schnell mal 1 MB und mehr, und hilft damit, "schwergewichtige" Datenflatrates zu verkaufen. Weniger erfreulich für den mobilen Nutzer, der gerade ein langsames Netz nutzen muss.
Das muss nicht sein. justmarkup.com beschreibt eine Technik, diese GIFs durch HTML5-Videos zu ersetzen, und dennoch das Look & Feel eines animated GIFs zu erzeugen. Das Erstaunliche daran: Die Dateigröße schrumpft durch den Einsatz von HTML5-Videos typischerweise um einen Faktor 6 bis 10.
Tools zur Konvertierung von GIF zu mp4 gibt es zahlreich im Web.
Die zu mp4 konvertierten GIFs werden wie jedes HTML5-Video eingebunden:
<video controls playsinline data-gif preload="metadata" width="480" height="360">
<source src="//webdesign.weisshart.de/videos/Newtons_cradle_animation_book.mp4" >
</video>
Das folgende JavaScript lässt dann jedes Video auf der Seite wie ein animated GIF wirken.
<script>
var supports_video_autoplay = function(callback) {
var v = document.createElement("video");
v.paused = true;
var p = false;
try {
p = "play" in v && v.play();
} catch (err) {
}
typeof callback === "function" && callback(!v.paused || "Promise" in window && p instanceof Promise);
};
supports_video_autoplay(function(supportsAutoplay) {
if (supportsAutoplay && 'querySelector' in document) {
var videos = document.querySelectorAll('[data-gif]');
[].forEach.call(videos, function(video) {
video.removeAttribute('controls');
video.setAttribute('autoplay', true);
video.setAttribute('controlsList', 'nodownload');
video.setAttribute('loop', true);
});
} else {
// no video autoplay support
}
});
</script>
Über den Sinn oder Unsinn dieser Zappeldinger kann man sicher geteilter Meinung sein. Das obige Beispiel dient ja wenigstens der Illustration eines physikalischen Effekts, was durchaus Sinn machen kann. Andererseits können schnelle rhythmische Bewegungen irritieren, ja im schlimmsten Fall sogar Anfälle auslösen. Es sollte also jedenfalls dem Besucher möglich sein, die Animation zu stoppen.
Ich habe das Video-Tag daher um ein weiteres Detail erweitert. Beim Mouseover, wenn also der Mauszeiger die Animation überfährt, sowie beim Fokussieren der Animation mit der Tastatur, werden die Video-Steuerelemente eingeblendet. Mit etwas Fingerspitzengefühl funktioniert das sogar auf Touchscreens.
<video tabindex="0" controls playsinline data-gif preload="metadata" width="480" height="360" onmouseover="this.setAttribute('controls', true)" onfocus="this.setAttribute('controls', true)" >
<source src="videos/newtons_cradle_animation_book.mp4" >
</video>
Das folgende Video [1.0 MB] belegt, dass autoplay erst greift, wenn die Videos in den Viewport gescrollt werden. Erst dann werden die 1.0 MB geladen. So muss RWD.
Außerdem sind die beiden folgenden Videos so eingestellt, dass beim Hovern (Überfahren mit der Maus) nicht nur die Steuerelemente eingeblendet werden, sondern das Video auch sofort stoppt, und ggf. manuell wieder gestartet werden kann. Das wäre möglicherweise sogar die optimale Einstellung.
Und jetzt noch so ein Zappeldingens, das geradezu danach verlangt, gestoppt zu werden.
Nachtrag 26.08.2018
Google Chrome hat Autoplay definitiv den Kampf angesagt. Seit Version 66 unterzieht der Browser jede Webseite einer Bewertung, um einen "Media Engagement Index" (MEI) zu berechnen. Der MEI misst, wie wahrscheinlich es ist, dass der Nutzer das Video anschauen möchte. Wenn der Nutzer auf einer Webseite regelmäßig Videos anguckt und damit der MEI-Score hoch ausfällt, erlaubt Chrome ein automatisches Abspielen.
Dieses Feature ist prinzipiell zu begrüßen. Für die hier dargestellte Technik bedeutet dies allerdings, dass möglicherweise die "Pseudo-GIFs" eben nicht automatisch starten, sondern manuell gestartet werden müssen.
Die individuellen, d.h. die im jeweiligen Browser gespeicherten MEI-Werte sind unter chrome://media-engagement/ einsehbar.
Wer Autoplay im Chrome-Browser wieder aktivieren will: chrome://flags/#autoplay-policy
Quelle: heise.de
Wichtig: Das oben Gesagte gilt, zumindest b.a.w., nur für Videos mit Audio. Bei Videos ohne Audio blockiert Chrome Autoplay nicht. Es genügt jedoch nicht, ein Video ohne Audiospur zu verwenden. Um Chrome zu zeigen, dass das Video auch wirklich kein Audio beinhaltet, muss der HTML-Code explizit um das Attribut "muted" erweitert werden. Also:
<video controls muted playsinline data-gif preload="metadata" width="480" height="360">
<source src="videos/Newtons_cradle_animation_book.mp4" >
</video>
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
1 Kommentar
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Fritz schrieb am Samstag, 16.03.19 21:54 Uhr:
Der Firefox-Browser unter Android mag diese Technik anscheinend gar nicht. Sobald eine Seite dieses Script enthält, lädt die Seite nicht mehr alle JavaScripts.
Na ja, mal schauen, ob ich auch diesen Exoten zufrieden stellen kann.
Nachtrag 27.03.2019: Das Problem scheint "mein" Android/Firefox zu sein: Er spielt kein einziges Video. Also Entwarnung?