Safari 11.1 brachte ein seltsames, aber sehr nützliches Feature: die Möglichkeit, eine Videoquelle im <img>-Tag zu verwenden. Die Idee ist, dass es die gleiche Funktion wie ein GIF erfüllt (stumm, automatisch abspielend, wiederholend), aber mit großen Leistungsvorteilen. Wie groß? „20x schneller und 7x schneller zu dekodieren als das GIF-Äquivalent“, sagt Colin Bendell.
Nicht alle Browser unterstützen dies, daher ist das <picture>-Element bereit für ein Fallback. Bruce Lawson zeigt, wie einfach das sein kann.
<picture>
<source type="video/mp4" srcset="adorable-cat.mp4">
<!-- perhaps even an animated WebP fallback here as well -->
<img src="adorable-cat.gif" alt="adorable cat tears throat out of owner and eats his eyeballs">
</picture>Šime Vidas merkt an, dass Sie eine breitere Browserunterstützung erhalten, wenn Sie den <video>-Tag verwenden.
<video src="https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4" muted autoplay loop playsinline></video>Aber wie Bendell bemerkte, sind die Leistungsvorteile bei Videos nicht vorhanden, insbesondere die Tatsache, dass Videos nicht vom Preloader unterstützt werden. Leider ist es vorerst doch der <video>-Tag, da
es diesen nervigen WebKit-Bug in Safari gibt, der den Preloader veranlasst, die erste
<source>unabhängig von der MIME-Typ-Deklaration herunterzuladen. Der Haupt-DOM-Loader erkennt den Fehler und wählt die richtige aus. Der Schaden ist jedoch bereits angerichtet. Der Preloader verschenkt seine Chance, das Bild frühzeitig herunterzuladen, und lädt obendrein die falsche Version herunter, was Bytes verschwendet. Die gute Nachricht ist, dass ich diesen Bug behoben habe und er in Safari TP 45 enthalten sein sollte.Kurz gesagt, die Verwendung von
<picture>und<source type>zur Auswahl des MIME-Typs ist nicht ratsam, bis die nächste Version von Safari über 90 % der Benutzerbasis erreicht.
Dennoch wird es schließlich sehr nützlich sein.
Was macht das, was nicht schon mit dem Videotag möglich ist?
Funktional nichts, aber es hat Leistungsvorteile. Schauen Sie sich den Artikel oben an ;)
Okay, der zitierte Artikel besagt, dass Browser den Videotag nicht vorladen, im Gegensatz zu Bildern. Gibt es kein Attribut für den Videotag, das dem Browser genau das sagt? Ich meine, ich erinnere mich, dass es preload hieß?
Das
preload-Attribut ist in diesem Fall nicht erforderlich, da die Seite bereits über dasautoplay-Attribut angibt, dass das Video sofort geladen werden soll.Ich möchte betonen, dass es die Verantwortung der *Browser* ist, sicherzustellen, dass stummgeschaltetes Video-Autoplay genauso schnell ist wie ein animiertes Bild. Wenn es aus irgendeinem Grund derzeit nicht der Fall ist, dann muss der Browser dies beheben. Die Verwendung von
<img>mit einer MP4-Quelle hat eine schönere (kürzere) Syntax, aber Websites sollten nicht aus Leistungsgründen gezwungen werden, diese zu verwenden.Ich denke, das ist eine großartige Idee... gut gemacht, Safari... Was ich mir wirklich wünschen würde, wäre eine native Browser-Möglichkeit, ein Video als Hintergrundbild in CSS festzulegen... das wäre großartig... aber ich nehme, was ich bekommen kann, für jetzt (oder zumindest für die nahe Zukunft...).
Ich denke, das Problem ist nicht die „Performance“, sondern die Semantik.
Ignoriert ein Video in einem Bild-Tag den Ton? (Sollte es, ein Bild ist keine Multimedia-Inhalt).
Vielleicht ist ein größeres Problem damit die Vorstellung, dass animierte und statische Medien (was eindeutig nicht dasselbe ist) in irgendeinen oder den anderen Tag gesteckt werden.
Tatsächlich ist Video auch ein schrecklicher Name. Ich bin mir einfach nicht sicher, ob ich einen alternativen Namen habe, der nicht völlig unbeholfen ist.
„20x schneller und 7x schneller zu dekodieren als das GIF-Äquivalent“. Das allein ist erstaunlich.
Können wir bald mit Unterstützung aller wichtigen Browser rechnen?
Was ist ein pfiffiges Szenario, in dem man ein Video als Bild verwenden möchte?
Überall dort, wo Sie sonst ein animiertes GIF wählen würden.
Was ist mit einem Fallback, der den oben erwähnten Videotag verwendet?
Vielleicht erinnern sich Entwickler aus alten Zeiten, dass alte IE-Versionen (4, 5 oder 6) AVI- und MPEG-Videodateien abgespielt haben, ich erinnere mich nicht genau. Also ist dieses Feature nicht so neu :)