Überlagern von Videos mit Transparenz beim Wellen des Cross-Browser-Supports

Wenn Websites in Bezug auf das Design immer dynamischer werden, müssen manchmal komplexe, animierte Elemente einbezogen werden. Es gibt viele Möglichkeiten, dies von CSS -Übergängen zum 3D -Rendering auf Leinwand und animierter SVG zu tun. Aber es ist oft einfacher, ein

Aber was ist, wenn Sie einen transparenten Hintergrund in diesem Video benötigen, damit es sich überlagern und mit anderen Inhalten auf der Seite interagieren kann? Es ist möglich, kann aber schwierig sein, insbesondere Kreuzbrowser. Lassen Sie uns das untersuchen.

Hier ist ein Beispiel

Um zu sehen, wie transparente Video -Overlays funktionieren, habe ich ein Beispiel vorbereitet, von dem ich hoffe, dass es sich sowohl lustig als auch zuordenbar anfühlt. Die Idee ist, Videos mit interaktiven Inhalten darunter zu integrieren, damit sich der Inhalt hinter dem Video ändert, wenn sich der Schieberegler vorantreibt. Es ist ein Slider -Werbe -Hundefutter mit einem echten Video eines Hundes auf der Overlay, und ich bin sicher, dass realistischer, niedlicher Hund die Umwandlungsrate verbessern würde!

Sie können diesem Artikel folgen, um diese Demo selbst nachzubilden. Ein Teil dessen, was Sie benötigen, um ein Video wie dieses 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.

Bilder herunterladen

Möglichkeiten erforschen

Um diesen Effekt zu erzielen, begann ich mit der Suche nach einer NY -Art von Lösung, mit der ich animierte Inhalte mit transparentem Hintergrund auf der Seite einfügen kann.

GIF

Das erste, was auftauchte, war ein GIF. Obwohl das GIF -Format vor über 30 Jahren eingeführt wurde, wird es immer noch weit verbreitet. Leider hat es seine Grenzen. Obwohl es perfekt für einfache und kleine animierte Grafiken funktioniert, ist es nicht so gut für farbenfrohe, lange Videomaterial, es verfügt über begrenzte Farbtöne und wird für komplexe Videos viel groß wachsen.

APNG

Die nächste Option, die ich mir angesehen habe, war APNG , was aus irgendeinem Grund nicht so beliebt ist wie GIF, aber viel besser. (Ich wusste nicht einmal, dass es existierte, oder?) APNG funktioniert ähnlich wie animierte GIF-Dateien, während Sie 24-Bit-Bilder und 8-Bit-Transparenz unterstützen. Es ist auch rückwärtskompatibel mit regulärem PNG. Wenn APNG nicht unterstützt wird, wird der erste Frame angezeigt. Es wird von beliebten Browsern unterstützt, aber keine Unterstützung im Internet Explorer 11 (yup, einige Menschen müssen das noch unterstützen). Während es der Weg schien, für einen Moment zu gehen, war ich mit seiner Dateigröße und -leistung nicht zufrieden.

Lustige Tatsache: Apple hat das APNG -Format als bevorzugtes Format für animierte Aufkleber in iOS 10 iMessage -Apps übernommen.

Schleifen Sie durch PNGs

Als nächstes kam eine grobe, aber funktionierende Idee zu: Verwenden Sie eine Reihe von PNGs und schleifen Sie sie mit JavaScript durch , um das Video zu imitieren. Es erfordert jedoch eine Menge Datenübertragung (jeder Videoprahmen wäre ein separates Bild) und Ressourcen zum Animieren (Sie können den Akku eines Benutzers schnell abtropfen lassen oder ihren Computerlüfter verrückt werden).

Ich gab diese Idee schnell auf, aber es stellte sich heraus, dass sie später nützlich war. Ich werde am Ende des Artikels darauf zurückkommen.

Webm mit Alpha -Transparenz

Da alle Formate für hier fehlgeschlagen waren, begann ich mich mit Videos zu untersuchen. Ich habe einen Artikel über Alpha -Transparenz in Chrome Video gefunden, der 2013 veröffentlicht wurde, in dem Google Chrome -Unterstützung für WebM mit einem Alpha -Kanal bekannt gegeben wird. Es zeigt sogar ein Beispiel und teilt Tipps zur Verwendung. Ich ging den Artikel durch und es fühlte sich sofort wie der Weg an. Ich war noch mehr überzeugt, nachdem ich meine Bildsequenz in WebM konvertiert hatte, da GIF bei 540 kb nur 540 kb mit der gleichen Bildrate und den vollen Farben wies bei der gleichen Bildrate und den vollen Farben ein WEBM -WEBM einmachte! Das ist mehr als 10 -mal kleiner und bietet eine bessere Leistung und Qualität. Eindrucksvoll!

Die Freude dauerte jedoch nicht lange. Sobald ich die Website auf meinem iOS -Telefon geöffnet habe, wurde mir klar, dass ich mit der Überprüfung der Browserkompatibilität beginnen sollte. Leider unterstützt Safari (iOS und macOS) keine Transparenz in WebM. Während mein Video perfekt an Chrome, Firefox und Edge arbeitete, begrüßte Safari mich mit einem hässlichen schwarzen Hintergrund.

Die Suche geht weiter…

Eine gute Lösung

Zum Glück habe ich ein Video von WWDC 2019 gefunden, in dem HEVC -Video mit Alpha -Unterstützung für Safari angekündigt wurde, die in iOS 13 und MacOS Catalina abgebildet sind. Es schien die gleiche Funktionalität wie WebM zu liefern, aber mit Unterstützung auf Apple -Geräten. Also habe ich mich für die Hybridlösung entschieden: HEVC für Safari und Webm für andere Browser.

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

1. Erstellen Sie ein HEVC mit Alpha-Transparenz
2. Erkennen, dass Safari (und die Version) das richtige Format erstellt

Erstellen eines transparenten Videoes

Wir beginnen mit dem einfachen Teil: Erstellen 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, würde ich empfehlen, dort zu beginnen, weil es zu so vielen Dingen fähig ist. Ich kann sagen, dass FFMPEG mir geholfen hat, Videodateigrößen mehr als zehnmal zu reduzieren, ohne dass sich eine sichtbare Bildqualitätsverschlechterung abbaut. Aber kehren wir zur Transparenz zurück.

Nach meiner Erfahrung erhalten Sie, wenn Sie animierte Elemente in das Website -Layout einbeziehen müssen, sie als eine Reihe von Videorahmen in PNG. Selbst während der Arbeit an meinem Beispielprojekt hat ein Tool, das den Hintergrund aus Videos entfernt, eine Reihe von Bildern für mich generiert. Ich werde hier fortfahren, vorausgesetzt, wir erstellen das Video aus einer Reihe von Bildern (denken Sie daran, Sie können unseren Satz herunterladen), aber selbst wenn Sie stattdessen eine Videodatei haben, sieht der Vorgang ähnlich aus (passen Sie die FFMPEG -Optionen an Ihre Anforderungen an).

Wir sind jetzt bereit, ein Video zu erstellen. Mit der Befehlszeile navigieren wir zu dem Ordner, der die PNG -Dateien enthält, und führen den folgenden Befehl aus:

 FFMPEG -Ramerate 25 -i Unscreen -=. Png -c: v libvpx -vp9 -pix_fmt yuva420p output.webm

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

• Framerate: Wie viel Bilder werden für 1s des Ausgabedios?
• -I-Unschreiung-=. PNG: Eingabedatei Name und Format. Meine Dateien haben Zahlen von 001 bis 150, daher habe ich = als Maske verwendet, um alle Dateien mit drei Ziffern im Namen auszuwählen.
• -C: V: Gibt den zu verwendenden Codec an. Ich möchte, dass das Video mit VP9 codiert wird, das von den meisten Webbrowsern unterstützt wird.
• -pix_fmt: Gibt das zu verwendende Pixelformat an. In unserem CAS sollte es einen Alpha -Kanal unterstützen. Sie können alle unterstützten Formate sehen, wenn Sie FFMPEG - -PIX_FMTS ausführen.
• Ausgabe.Webm: Bietet den gewünschten Ausgabedateinamen als letztes Argument

Es gibt viel mehr Optionen, aber ich werde nicht auf Details eingehen, da wahrscheinlich mehr als ein Artikel erforderlich sein würde, um sie durchzugehen. Diejenigen, die im Beispiel für den Befehl für unseren Anwendungsfall bereitgestellt werden.

Nachdem der Vorgang abgeschlossen ist, sollten wir eine neue Datei aus output.Webm sehen. Wenn Sie sie in einem unterstützten Browser öffnen, werden Sie ein Video sehen. Einfach, richtig?

HEVC Alpha schaffen

Da wir eine Webp -Datei bereit haben, ist es Zeit, zum zweiten Format zu wechseln, 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ß, besteht die einzige Möglichkeit, HEVC mit Alpha zu erstellen, darin, den Finder oder den Kompressor auf dem Mac zu verwenden. Wenn Sie einen PC haben, müssen Sie wahrscheinlich jemanden mit Mac fragen, um dies für Sie zu tun. Die Kompressor -App ist nur mit endgültigem Cut -Pro versehen, daher werde ich sie nicht verwenden, obwohl es sich möglicherweise überlegt, wenn Sie benutzerdefinierte Einstellungen benötigen.

Seit MacOS Catalina verfügt der Finder über ein integriertes Encode -Medien -Tool zum Konvertieren von Videos. Es ist einfach (und kostenlos), also füttert es unsere Bedürfnisse.

Der Finder erwartet eine Videodatei als Eingabe. Zuerst müssen wir die Bildsequenz in PRORES 4444 konvertieren. Dies ist ein wichtiger Schritt, da das Encode -Medien -Tool nur ein Video akzeptiert - es fällt aus, wenn Sie das von ihm akzeptierte Format angeben. Es gab mir ein oder zwei Kopfschmerzen, bis ich die richtige Codierung für die Eingabedatei herausfand.

Mit FFMPEG können wir Eingabevideos erstellen. Wie wir beim Erstellen von WebM haben, müssen wir nur FFMPEG mit den richtigen Argumenten ausführen:

 FFMPEG -Ramerate 25 -i unschreier -=.

Von diesem Punkt an wird ein Mac benötigt. Aber der Prozess ist einfach und beinhaltet nichts in dem Terminal einzugeben. Selbst wenn Sie einen Techy-Freund mit einem Mac für Sie bitten, können sie sicher verwalten.

Wenn Sie PRORES4444 VIDEO FREAT AUSBEREITUNG, können Sie zum Ordner in Finder navigieren, mit der rechten Maustaste darauf klicken und im Kontextmenü ausgewählte Videodateien auswählen.

Ein Fenster erscheint. Wählen Sie die gewünschte HEVC -Qualität aus (es stehen zwei zur Auswahl) und überprüfen Sie die Option, um die Transparenz zu erhalten. Klicken Sie dann auf die Schaltfläche "Weiter".

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

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

Servieren transparenter Videos für alle Browser

Wir können

Es gibt noch eine Sache, für die man sich kümmern muss: Einige Browser unterstützen Webm oder HEVC selbst, aber ohne Transparenz . Diese Browser spielen das Video, aber mit einem schwarzen Hintergrund anstelle eines Alpha -Kanals. Zum Beispiel wird Safari 12 ohne Transparenz HEVC spielen. Das ist für uns inakzeptabel.

Normalerweise würde ich das -Element verwenden, um das Video zusammen mit mehreren Formaten als Fallbacks bereitzustellen, und der Browser würde das von ihm unterstützte. Da wir HEVC jedoch nur für bestimmte Safari -Versionen zeigen 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. Beginnen wir damit, diese zu erkennen. Die empfohlene Möglichkeit, die Website -Funktionen auf der Grundlage von Unterstützung anzupassen, besteht darin, die Existenz einer API zu erkennen, anstatt den Benutzeragenten zu betrachten. Ich habe jedoch keine einfache Möglichkeit gefunden, zu erkennen, ob der Browser Transparenz im Videoformat unterstützt. Stattdessen habe ich mir meine eigene Lösung ausgedacht. Es ist nicht schön, aber es macht den Job.

 Funktion 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')!
  Return Issafari && HasMediaCapabilities
}

Dies zielt auf Safari 13 und höher ab, indem Sie sich Navigator.MediaCapabilities ansehen, die in älteren Versionen nicht unterstützt werden, und um zu suchen, dass der Browser überhaupt Safari ist. Wenn die Funktion wahr zurückgibt, bin ich gut mit HEVC Alpha. Für jeden anderen Fall lade ich WebM -Video.

Hier ist ein Beispiel dafür, wie dies in HTML zusammenkommt:

 <video autoplay playsinline> </video>

<script>
const Player = document.getElementById (&#39;Player&#39;);
Player.src = SupportShevcalpha ()? &#39;output.mov&#39;: &#39;output.webm&#39;;
</script>

Wenn Sie neugierig auf diese Schleifenstummel-Autoplay-PlaySInline-Argumente zum Videoelement sind, geht es darum, eine GIF-ähnliche Erfahrung zu replizieren:

• Ohne gedämpft wird das Video nicht ohne Benutzerinteraktion abgespielt.
• Mit PlaySInline auf iOS spielt das Video genau dort, wo es sich im Layout befindet, anstatt sich im Vollbildmodus zu öffnen.
• Mit Schleife wiederholt sich das Video immer wieder.
• Mit Autoplay wird das Video automatisch auf Seite geladen werden (solange wir auch stummgeschaltet sind).

Das war's! Wir haben eine leichte, leistungsstarke und qualitativ hochwertige Lösung für transparente Videos, die an den meisten modernen Browsern (mindestens die letzten beiden aktuellen Versionen von Chrome, Firefox, Safari und Edge) funktioniert. Wir können einige grundlegende HTML und CSS hinzufügen, um statische Inhalte damit zu integrieren und ein bisschen realer zu machen, oder nur die gleiche Idee in meiner Demo verwenden. Das war nicht schlecht, oder?

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

Im Allgemeinen würde ich empfehlen, eine Funktion wie diese auf moderne Browser zu beschränken und das Video in IE zu verbergen. Das Video ist wahrscheinlich kein kritisches Element der Website. Obwohl ich früher an einem kommerziellen Projekt gearbeitet habe, bei dem der IE 11 ein Muss war und ich gezwungen war, etwas herauszufinden, um das transparente Video dort zu zeigen. Am Ende habe ich PNG -Bilder mit JavaScript durchgefahren. Ich reduzierte die Anzahl der Frames und wechselte mit einem Timer zwischen ihnen. Sicher, die Leistung war schrecklich, aber es hat funktioniert. Das Video war für das gesamte Design sehr wichtig, daher beschlossen wir absichtlich, die Leistung auf dem IE 11 zu opfern, um die volle Erfahrung zu bieten.

Zusammenfassung

Ich hoffe, dass ich Ihnen einige Zeit gespart habe, um die Idee von Alpha-transparenten Videos zu recherchieren und jetzt in der Lage zu sein, animierte Elemente wie diese auf Ihre Website zu integrieren. Ich wette, du wirst es eines Tages brauchen!

Haben Sie eine andere Vorstellung davon, wie Sie transparentes Video verwenden können? Oder vielleicht schon einige Erfahrung damit? Lass es mich in den Kommentaren wissen.

Das obige ist der detaillierte Inhalt vonÜberlagern von Videos mit Transparenz beim Wellen des Cross-Browser-Supports. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!