Artikel-Hilfsmenü
Samstag, 18. Juli 2020 – aktualisiert am Sonntag, 9. August 2020
Animated Gifs durch Video ersetzen, und mit einem Klick stoppen
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.
Hinweis: Diese Technik ersetzt die Vorgängerversionen gif2mp4.php und gif2mp4_old.php
Demo
Animated GIFs kann man ohne weiteres durch HTML5-Videos ersetzen, und dennoch das Look & Feel eines animated GIFs erzeugen. Das Erstaunliche daran: Die Dateigröße schrumpft durch die Umwandlung in HTML5-Videos typischerweise um einen Faktor 6 bis 10.
Zur einfachen Umwandlung gibt es zahlreiche Tools, auch online.
Und das Beste: Ein wenig JavaScript schafft die Möglichkeit, das Gezappel mit einem Klick zu beenden (und auf Wunsch auch wieder zu starten).
Die Technik ist responsive, funktioniert also auch mit Tipp auf dem Touchscreen, und sie ist barrierefrei, also ohne Maus, nur mit der Tastatur, bedienbar.
Code: CodePen.
Nachtrag 25.07.2020
Local Storage sorgt dafür, dass der Zustand – Play oder Pause – auf dem Gerät gespeichert bleibt, also ein pausiertes "Zappelgif" auch beim nächsten Besuch der Site pausiert bleibt. Local Storage funktioniert sogar seitenübergreifend, wenn auf den gleichen Local Storage Item zugegriffen wird.
Local Storage ist auf CodePen leider nicht erlaubt. Deshalb hier die aktualisierten Codes:
HTML
<div id ="d_vid1" tabindex="0" onclick="toggle_video('vid1');this.blur()" onkeypress="toggle_video('vid1');" aria-hidden="true" >
<video id="vid1" class="enable_inv" muted autoplay loop playsinline >
<source src="/videos/banana_anim.mp4" type="video/mp4">
</video>
</div>
CSS
<style>
video {max-width:100%;}
#d_vid1 {
position: relative;
width:364px;
max-width:100%;
border:1px solid #888;
display:grid;
margin:.5em 1em 1em 0;
padding-bottom:1px;
}
#d_vid1::after {
content: attr(data);
font: bolder 1.5em AvenirNext-Heavy,Droid sans, sans-serif;
position: absolute;
top: 5px;
right: 5px;
color:#aaa;
}
#d_vid1:focus {outline:2px solid #888;}
#d_vid1:hover {outline:2px solid transparent;}
</style>
JavaScript
<script>
document.getElementById('d_vid1').setAttribute('data', 'II'+'\u00A0');
var vi = document.getElementById('vid1');
window.onload = function() {
var status = localStorage.getItem("paused");
if (status == 1) {
vi.pause();
document.getElementById('d_vid1').setAttribute('data', '▶︎');
}
}
function toggle_video() {
if (vi.paused) {
vi.play();
document.getElementById('d_vid1').setAttribute('data', 'II'+'\u00A0');
localStorage.setItem("paused", 0);
} else {
vi.pause();
document.getElementById('d_vid1').setAttribute('data', '▶︎');
localStorage.setItem("paused", 1);
}
}
</script>
Nachtrag 09.08.2020
Die beschriebene Technik hilft natürlich nicht, wenn man auf fremden Seiten über "Zappelgifs" stolpert. Aber auch dagegen ist ein Kraut gewachsen: Ein Bookmarklet.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Ü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.