Transparente Videos im Web

Heute hatte ich spontan die Idee, eine meiner Domains mit einer “familiären” Landing-Page zu versehen. Bisher hatte ich von www.bleisteiner.info immer einfach auf meine Website weitergeleitet – eigentlich war sie aber mal als Einstieg für die ganze Familie gedacht.

Der erste Wurf sollte schnell und einfach sein – ohne viel Schnick-Schnack. Also habe ich mal eben die ohnehin schon vorhandenen Memoji der Familie in Pose geworfen und platziert. Dazu dann einfache Links zu den jeweiligen Sub-Domains und fertig… kein großer Aufwand.

Allerdings wollte ich es dann doch etwas dynamischer. Warum eigentlich nicht kleine Video-Sequenzen der animierten Memoji? Das sollte doch machbar sein. Es gestaltet sich aber schwieriger als gedacht. Die von iOS generierten Videos sind HEVC kodiert und haben einen Alpha-Kanal – aber nur Safari am Mac kann die so abspielen. Firefox oder Chrome können damit (noch) nichts anfangen. Also habe ich versucht, die Videos in WebM zu verwandeln und den Alpha-Kanal dabei zu erhalten. Leider ist mir das bisher aber nicht gelungen. Das direkte kodieren von HEVC nach WebM über ffmpeg funktioniert zwar – der Background der Videos ist aber immer schwarz.

ffmpeg -i memoji.mov -c:v libvpx-vp9 memoji.webm

Für den Moment habe ich mir daher mit einem kleinen Trick geholfen, der die Memoji zumindest am Mac mit Safari zum Leben erweckt:

<video autoplay loop muted poster="sticker.png" width="210.5" height="210.5">
    <source src="memoji.mov" type="video/mp4"><!-- Safari only... -->
    <img src="sticker.png" width="210.5" height="210.5" alt="">
</video>
Preview der Animation

Das PNG wird als Platzhalter verwendet, bis der Browser das Video geladen hat und startet. Unter Firefox oder Chrome bleibt das Preview einfach stehen, weil diese mit dem HEVC Video nichts anfangen können. Das Gleiche gilt für den Safari auf dem iPhone. Das iPad dagegen spielt das Video unter iOS 13 wieder ab. Sobald ich das Konvertierungs-Problem mit dem Alpha-Kanal gelöst habe, kann ich das ausbauen und andere Formate bereitstellen. Vermutlich fehlt mir nur das richtige Tool… Ideen?