Overlaying Video With Transparency While Wrangling Cross-Browser Support

Da Websites im Design immer dynamischer werden, besteht manchmal die Notwendigkeit, komplexe, animierte Elemente zu integrieren. Es gibt viele Möglichkeiten, dies zu tun, von CSS-Übergängen bis hin zu 3D-Rendering auf Canvas und animiertem SVG. Aber es ist oft einfacher, ein <video> zu verwenden, da diese recht effizient sein können und mit ihnen fast alles Visuelle möglich ist.

Aber was ist, wenn Sie einen transparenten Hintergrund für dieses Video benötigen, damit es andere Inhalte auf der Seite überlagern und scheinbar mit ihnen interagieren kann? Das ist möglich, aber es kann knifflig sein, insbesondere browserübergreifend. Lassen Sie uns das untersuchen.

Hier ist ein Beispiel

Um zu sehen, wie transparente Video-Overlays funktionieren, habe ich ein Beispiel vorbereitet, das hoffentlich sowohl unterhaltsam als auch nachvollziehbar ist. Die Idee ist, Video mit interaktiven Inhalten darunter zu integrieren, damit sich der Inhalt hinter dem Video ändert, während der Schieberegler fortschreitet. Es ist ein Schieberegler, der Hundefutter bewirbt, mit einem echten Video eines Hundes im Overlay, und ich bin sicher, dass ein realistischer, süßer Hund die Konversionsrate verbessern würde!

Sie können diesem Artikel folgen, um diese Demo selbst nachzubauen. Ein Teil dessen, was Sie benötigen, um ein solches Video zu erstellen, ist eine „Bildsequenz“ (eine Reihe von alpha-transparenten Bildern, die wir zu einem Video zusammenfügen). Ich stelle die Bilder zur Verfügung, die ich für das Beispiel verwendet habe.

Möglichkeiten erkunden

Um diesen Effekt zu erzielen, begann ich mit der Suche nach *irgendeiner* Lösung, die es mir erlauben würde, animierte Inhalte mit transparentem Hintergrund auf der Seite einzufügen.

GIF

Das Erste, was mir einfiel, war ein GIF. Obwohl das GIF-Format vor über 30 Jahren eingeführt wurde, wird es immer noch häufig verwendet. Leider hat es seine Grenzen. Während es perfekt für einfache und kleine animierte Grafiken funktioniert, ist es nicht so gut für farbenfrohe, lange Videounterlagen, es hat einen begrenzten Farbraum und wird bei komplexen Videos stark an Größe zunehmen.

APNG

Die nächste Option, die ich mir ansah, war APNG, das aus irgendeinem Grund nicht so beliebt ist wie GIF, aber viel besser ist. (Ich wusste nicht einmal, dass es existiert, wusstest du es?) APNG funktioniert ähnlich wie animierte GIF-Dateien, unterstützt aber 24-Bit-Bilder und 8-Bit-Transparenz. Es ist auch abwärtskompatibel mit normalem PNG. Wenn APNG nicht unterstützt wird, wird der erste Frame angezeigt. Es wird von beliebten Browsern unterstützt, aber nicht von Internet Explorer 11 (ja, einige Leute müssen das immer noch unterstützen). Obwohl es für einen Moment wie der richtige Weg schien, war ich mit seiner Dateigröße und Leistung nicht zufrieden.

Fun Fact: Apple hat das APNG-Format als sein bevorzugtes Format für animierte Sticker in iOS 10 iMessage-Apps übernommen.

Durch PNGs schleifen

Als Nächstes kam mir eine grobe, aber funktionierende Idee: **Verwenden Sie eine Reihe von PNGs und schleifen Sie sie mit JavaScript durch, um das Video zu imitieren.** Aber das erfordert eine hohe Datenübertragung (jeder Videobild ist ein separates Bild) und Ressourcen zum Animieren (Sie könnten die Batterie eines Benutzers schnell leeren oder das Lüftergeräusch seines Computers laut werden lassen).

Diese Idee habe ich schnell verworfen, aber sie erwies sich später als nützlich. Ich werde darauf am Ende des Artikels zurückkommen.

WebM mit Alpha-Transparenz

Da alle Formate für <img> hier versagten, begann ich, mich mit Videos zu befassen. Ich fand einen Artikel über Alpha-Transparenz in Chrome-Videos, der 2013 veröffentlicht wurde und die Unterstützung von Google Chrome für WebM mit einem Alpha-Kanal ankündigte. Er zeigt sogar ein Beispiel und gibt Tipps, wie man es verwendet. Ich habe den Artikel durchgelesen und er fühlte sich sofort wie der richtige Weg an. Ich war noch mehr überzeugt, nachdem ich meine Bildsequenz in WebM konvertiert hatte, denn während GIF 5,8 MB wog, war WebM mit Transparenz, unter Verwendung derselben Bildrate und voller Farben, nur 540 KB! Das ist mehr als 10-mal kleiner und bietet bessere Leistung und Qualität. Fantastisch!

Die Freude währte jedoch nicht lange. Sobald ich die Website auf meinem iOS-Telefon öffnete, wurde mir klar, dass ich zuerst die Browserkompatibilität hätte prüfen sollen. Leider unterstützt Safari (iOS und macOS) keine Transparenz in WebM. Während mein Video auf Chrome, Firefox und Edge perfekt funktionierte, begrüßte mich Safari mit einem hässlichen schwarzen Hintergrund.

Die Suche geht weiter…

Eine gute Lösung

Glücklicherweise fand ich ein Video von der WWDC 2019, das HEVC-Video mit Alpha-Unterstützung für Safari ab iOS 13 und macOS Catalina ankündigte. Es schien die gleiche Funktionalität wie WebM zu bieten, aber mit Unterstützung auf Apple-Geräten. Also entschied ich mich für die Hybridlösung: HEVC für Safari und WebM für andere Browser.

Das scheint die perfekte Lösung zu sein. Aber jetzt haben wir zwei Aufgaben:

1. Erstellung eines HEVC mit Alpha-Transparenz
2. Erkennung von Safari (und der Version), um das richtige Format auszuliefern

Erstellung eines transparenten Videos

Wir beginnen mit dem einfachen Teil: der Erstellung einer WebM-Datei. Wenn Sie Videodateien erstellen, konvertieren oder sogar bearbeiten möchten, ist FFmpeg Ihr Freund. Es ist ein extrem leistungsstarkes Open-Source-Multimedia-Framework, und wenn Sie etwas mit Multimedia-Dateien zu tun haben, empfehle ich, dort zu beginnen, da es zu so vielen Dingen fähig ist. Ich kann sagen, dass FFmpeg mir geholfen hat, die Videodateigrößen um mehr als das 10-fache zu reduzieren, ohne sichtbare Bildqualitätsverluste. Aber kommen wir zurück zur Transparenz.

Meiner Erfahrung nach, wenn Sie animierte Elemente in ein Website-Layout einfügen müssen, erhalten Sie diese als eine Reihe von Videobildern in PNG. Selbst während der Arbeit an meinem Beispielprojekt hat ein Tool, das Hintergründe aus Videos entfernt, eine Reihe von Bildern für mich generiert. Ich fahre hier also fort, unter der Annahme, dass wir das Video aus einer Reihe von Bildern erstellen (denken Sie daran, Sie können unser Set herunterladen), aber auch wenn Sie stattdessen eine Videodatei haben, wird der Prozess ähnlich aussehen (passen Sie die FFmpeg-Optionen an Ihre Bedürfnisse an).

Wir sind nun bereit, ein Video zu erstellen. Über die Kommandozeile navigieren wir in den Ordner, der die PNG-Dateien enthält, und führen den folgenden Befehl aus:

ffmpeg -framerate 25 -i unscreen-%3d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

Sie können die Argumente an Ihre Bedürfnisse anpassen

• framerate: wie viele Bilder pro Sekunde des Ausgabevideos verwendet werden
• -i unscreen-%3d.png: Eingabedateiname und -format. Meine Dateien haben Nummern von 001 bis 150, also habe ich %3d als Maske verwendet, um alle Dateien mit dreistelligen Namen auszuwählen.
• -c:v: gibt den zu verwendenden Codec an. Ich möchte, dass das Video mit VP9 kodiert wird, was von den meisten Webbrowsern unterstützt wird.
• -pix_fmt: gibt das zu verwendende Pixelformat an. In unserem Fall sollte es einen Alpha-Kanal unterstützen. Sie können alle unterstützten Formate sehen, wenn Sie ffmpeg --pix_fmts ausführen.
• output.webm: liefert den gewünschten Ausgabedateinamen als letztes Argument

Es gibt noch viele weitere Optionen, aber ich werde nicht ins Detail gehen, da dies wahrscheinlich mehr als ein Artikel zum Durchgehen erfordern würde. Die im Beispielbefehl angegebenen Optionen funktionieren für unseren Anwendungsfall gut.

Nach Abschluss des Prozesses sollten wir eine neue Datei output.webm sehen, und wenn Sie sie in einem unterstützten Browser öffnen, sehen Sie ein Video. Einfach, oder?

Erstellung von HEVC Alpha

Da wir eine WebP-Datei fertig haben, ist es an der Zeit, zum zweiten Format überzugehen, das wir verwenden werden: **HEVC mit Alpha-Transparenz**. Leider unterstützt FFmpeg zum Zeitpunkt des Schreibens HEVC nicht, daher müssen wir ein anderes Tool verwenden. Soweit ich weiß, ist der einzige Weg, HEVC mit Alpha zu erstellen, die Verwendung des Finders oder von Compressor auf dem Mac. Wenn Sie einen PC haben, müssen Sie wahrscheinlich jemanden mit einem Mac bitten, dies für Sie zu tun. Die Compressor-App wird nur mit Final Cut Pro bereitgestellt, daher werde ich sie nicht verwenden, obwohl sie in Betracht gezogen werden könnte, wenn Sie benutzerdefinierte Einstellungen benötigen.

Seit macOS Catalina verfügt der Finder über ein integriertes Tool „Medien kodieren“, um Videos zu konvertieren. Es ist einfach (und kostenlos), also erfüllt es unsere Bedürfnisse.

Der Finder erwartet eine Videodatei als Eingabe, daher müssen wir zunächst die Bildsequenz in ProRes 4444 konvertieren. Dies ist ein wichtiger Schritt, da das Werkzeug „Medien kodieren“ nicht jede beliebige Videodatei akzeptiert – es schlägt fehl, wenn Sie nicht das Format bereitstellen, das es akzeptiert. Es hat mir ein paar Kopfschmerzen bereitet, bis ich die richtige Kodierung für die Eingabedatei herausgefunden habe.

Wir können die Eingabevideo mit FFmpeg erstellen. Wie beim Erstellen von WebM müssen wir nur FFmpeg mit den richtigen Argumenten ausführen:

ffmpeg -framerate 25 -i unscreen-%3d.png -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 150 output.mov

Von diesem Punkt an wird ein Mac benötigt. Aber der Prozess ist einfach und erfordert keine Eingabe im Terminal, sodass selbst wenn Sie einen nicht-technischen Freund mit einem Mac bitten, dies für Sie zu tun, ich bin sicher, dass er es schaffen kann.

Wenn das ProRes4444-Video fertig ist, können Sie zum enthaltenden Ordner im Finder navigieren, mit der rechten Maustaste darauf klicken und im Kontextmenü **Ausgewählte Videodateien kodieren** auswählen.

Ein Fenster wird angezeigt. Wählen Sie die gewünschte HEVC-Qualität (es gibt zwei zur Auswahl) und aktivieren Sie die Option **Transparenz beibehalten**. Klicken Sie dann auf die Schaltfläche „Weiter“.

Nach einem Moment sollten Sie eine neue Datei sehen, die in HEVC mit Alpha kodiert ist. Fertig! Das Öffnen dieser Datei in Safari bestätigt, dass die Transparenz funktioniert.

Zu guter Letzt ist es Zeit, die Videos auf der Website zu verwenden!

Ausliefern von transparenten Videos für alle Browser

Wir können das <video>-Element verwenden, um Videos auszuliefern. Wenn der Browser das angegebene Format im src-Attribut unterstützt, funktioniert es einfach. Aber wie ich bereits erwähnt habe, müssen wir HEVC für Safari und WebM für andere Browser bereitstellen.

Es gibt noch eine weitere Sache zu beachten: Einige Browser unterstützen WebM oder HEVC selbst *aber ohne Transparenz*. Diese Browser spielen das Video ab, aber mit einem schwarzen Hintergrund anstelle eines Alpha-Kanals. Safari 12 spielt beispielsweise HEVC ohne Transparenz ab. Das ist für uns inakzeptabel.

Normalerweise würde ich das <source />-Element verwenden, um das Video zusammen mit mehreren Formaten als Fallbacks bereitzustellen, und der Browser würde dasjenige auswählen, das er unterstützt. Da wir HEVC jedoch nur für bestimmte Safari-Versionen anzeigen möchten, müssen wir das Video-src-Attribut stattdessen mit JavaScript festlegen.

HEVC mit Transparenz wird in iOS 13 und Mac Safari 13 unterstützt, also beginnen wir damit, diese zu erkennen. Der empfohlene Weg, Website-Funktionen basierend auf der Unterstützung anzupassen, ist die Erkennung der Existenz einer API anstelle der Überprüfung des User Agents, aber ich habe keine einfache Möglichkeit gefunden, zu erkennen, ob der Browser die Transparenz im Videoformat unterstützt. Stattdessen habe ich meine eigene Lösung entwickelt. Sie ist nicht schön, aber sie erfüllt ihren Zweck.

function supportsHEVCAlpha() {
  const navigator = window.navigator;
  const ua = navigator.userAgent.toLowerCase()
  const hasMediaCapabilities = !!(navigator.mediaCapabilities && navigator.mediaCapabilities.decodingInfo)
  const isSafari = ((ua.indexOf('safari') != -1) && (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1)))
  return isSafari && hasMediaCapabilities
}

Dies zielt auf Safari 13 und höher ab, indem navigator.mediaCapabilities überprüft wird, das in älteren Versionen nicht unterstützt wird, und indem überprüft wird, ob der Browser überhaupt Safari ist. Wenn die Funktion true zurückgibt, dann kann ich HEVC-Alpha verwenden. In allen anderen Fällen lade ich ein WebM-Video.

Hier ist ein Beispiel, wie das in HTML zusammenkommt:

<video id="player" loop muted autoplay playsinline></video>

<script>
const player = document.getElementById('player');
player.src = supportsHEVCAlpha() ? 'output.mov' : 'output.webm';
</script>

Wenn Sie neugierig auf diese Argumente loop muted autoplay playsinline im Video-Element sind, dienen sie dazu, eine GIF-ähnliche Erfahrung zu replizieren.

• Ohne muted wird das Video ohne Benutzerinteraktion nicht abgespielt.
• Mit playsinline spielt das Video unter iOS direkt an der Stelle im Layout ab, anstatt sich im Vollbildmodus zu öffnen.
• Mit loop wiederholt sich das Video immer wieder.
• Mit autoplay wird das Video beim Laden der Seite automatisch abgespielt (solange wir auch muted angegeben haben).

Das war's! Wir haben eine leichte, performante und qualitativ hochwertige Lösung für transparente Videos, die in den meisten modernen Browsern (zumindest den letzten beiden aktuellen Versionen von Chrome, Firefox, Safari und Edge) funktioniert. Wir können etwas grundlegendes HTML und CSS hinzufügen, um statische Inhalte damit zu integrieren und sie etwas lebensnaher zu gestalten, oder einfach die gleiche Idee verwenden, die in meiner Demo steckt. Das war nicht allzu schlimm, oder?

Hey, aber was ist mit IE 11? Meine ganze Firma benutzt es!

Im Allgemeinen empfehle ich, eine solche Funktion auf moderne Browser zu beschränken und das Video in IE auszublenden. Das Video ist wahrscheinlich kein kritisches Element der Website. Ich habe jedoch früher an einem kommerziellen Projekt gearbeitet, bei dem die Unterstützung für IE 11 unerlässlich war, und ich war gezwungen, etwas zu finden, um das transparente Video dort anzuzeigen. Am Ende habe ich durch JavaScript PNG-Bilder durchlaufen lassen. Ich habe die Anzahl der Bilder reduziert und sie mit einem Timer gewechselt. Sicher, die Leistung war schrecklich, aber es funktionierte. Das Video war für das gesamte Design recht wichtig, sodass wir uns bewusst entschieden haben, die Leistung bei IE 11 zu opfern, um das volle Erlebnis zu bieten.

Zusammenfassung

Ich hoffe, ich habe Ihnen einige Zeit bei der Recherche zur Idee von Alpha-Transparenten Videos erspart und dass Sie nun animierte Elemente wie diese auf Ihrer Website einbauen können. Ich wette, Sie werden es irgendwann brauchen!

Haben Sie eine andere Idee, wie man transparentes Video verwenden kann? Oder vielleicht schon Erfahrungen damit? Lassen Sie es mich in den Kommentaren wissen.