Der massgeschneiderte Video Encoder für Storyblok – entwickelt von Ergosign

Mit dem Ziel, perfektes Video Content Management über das CMS von Storyblok zu gewährleisten, haben wir einen massgeschneiderten Video-Encoder als Plug-in entwickelt — wir stellen den Encoder nachfolgend näher vor.

Wie kam es zur Entwicklung des Plug-ins?

Videoinhalte gewinnen immer weiter an Bedeutung für digitale Auftritte, sie vereinfachen die Informationsverarbeitung für User und erhöhen so deren Verweildauer. Der Einsatz von Videoinhalten bedeutet nicht nur eine Herausforderung aus Sicht der Content-Erstellung, sondern erfordert auch ein angemessenes Content-Management. Nicht alle Formate und Codecs eignen sich für die Online-Nutzung — und die wenigsten Browser sind mit allen Codecs kompatibel. Zusätzlich müssen die Qualität und Grösse der Datei perfekt ausbalanciert sein. Denn grosse Dateien führen zu langen Ladezeiten und können sich negativ auf die User Experience und das Google-Ranking auswirken. Die optimale Anzeige auf verschiedenen Geräten, Bildschirmgrössen und Datenübertragungsraten erfordert ebenfalls besondere Aufmerksamkeit.

Die richtige Wahl eines CMS kann hier von entscheidender Bedeutung sein. Bei der Erstellung einer DXP (Digital Experience Platform), die genau auf die Bedürfnisse von Kunden angepasst ist, setzen wir bei Ergosign verschiedenste State-of-the-Art-Technologien ein. Hierzu gehören auch verschiedene Content-Management-Systeme, wie z. B. Storyblok. Dieses CMS überzeugt mit einer exzellenten Editor Experience und bietet unseren Kunden zahlreiche weitere Vorteile. Bei Storyblok wurde auch das Content-Management für Bilder und Grafiken mitgedacht. Das Content-Management im Encoding von Videos bietet, wie bei den meisten CMS, jedoch noch Raum für Verbesserungen. Gerade weil das Asset Management für Bilder und Grafiken von Storyblok sehr gelungen ist, haben wir den sonst empfohlenen Weg einer externen App-Integration mit All-in-One-Ansatz nicht in Erwägung gezogen.

Stattdessen entwickelten wir ein Plug-in, welches sich nahtlos in Storyblok integrieren lässt und sowohl das Video-Encoding, als auch das Content-Management übernimmt und vereinfacht. Dieses Plug-in behalten wir natürlich nicht nur für uns: Wir wollen in Zukunft auch eine Lizenz zur Verwendung des Plug-ins und des dafür von uns entwickelten Cloud Services anbieten.

Codecs, Endgeräte und Fehlerquoten beim Video-Content-Management

Unser Plug-in encodiert mithilfe eines ebenfalls von uns entwickelten Webservices Videos automatisch in verschiedenen Codecs und gibt Redakteuren hilfreiche Rückmeldung zur Dateigrösse und voraussichtlichen Ladezeit für Endnutzer. Aktuell haben wir für uns drei Codecs definiert, die alle gängigen Browser abdecken: H264 (für ältere Geräte mit wenig leistungsfähiger Grafikunterstützung), VP9 (für Safari und Firefox) und AV1 (als neuer Industriestandard und für Chrome).

Enkodiert wird für drei Bildschirmgrössen mit den Horizontalen: 768px, 1280px und 1920px. Das heisst, die optimale Auflösung für (wer mitgerechnet hat, weiss es schon ) neun verschiedene Einsatzbereiche sind vor gerendert. Auch sind die Zielgrössen völlig flexibel definierbar, die drei erwähnten Grössen empfinden wir jedoch als sinnvoll.

Das Ergebnis erlaubt eine Beschleunigung der Ladezeiten von 50-80 % (!), da die jeweilige Variante automatisch am richtigen Ausgabemedium ausgespielt wird. Dabei hilft der von uns entwickelte Custom Block „Responsive Video“. Darüber hinaus wird so Datenvolumen eingespart, denn statt verschiedene Versionen desselben Videos hochzuladen und manuell an verschiedene Voraussetzungen zu knüpfen, erledigt unser Plug-in alles automatisch mit nur einer Videoversion. Hierdurch können wir den Traffic erheblich reduzieren — und die Fehlerquote in der Redaktion tendiert gegen Null. Video Encoding kann sehr schnell sehr technisch (und frustrierend!) werden, was nicht immer zu den Skills des Redaktionsteams passt. Wir sind stolz darauf, durch unser Plug-in zu einer besseren Editor Experience beitragen zu können.

Bei der Usability steht unser Plug-in dem Content Management für Bilder von Storyblok in nichts nach: Videos sind in das Storyblok Asset System integriert. Bei der Auswahl eines Videos wird eine Vorschau generiert: Redakteur:innen wissen so genau, wie es für die User aussehen wird.

Empfehlungen für barrierefreien Video Content:

Die Einhaltung von Barrierefreiheitsstandards bei der Erstellung von Videoinhalten ist entscheidend, um sicherzustellen, dass Ihre Botschaft ein möglichst breites Publikum erreicht. Barrierefreier Videoinhalt erweitert somit die erreichbare Zielgruppe. Sie können diese Verbesserung beispielsweise erreichen, indem Sie Untertitel und Transkripte zu Ihren Videos hinzufügen. Audiodeskriptionen sind hilfreich für Videos mit visuellen Elementen oder Szenen ohne Dialog. Ebenso wichtig ist die Gestaltung von ausreichenden Kontrasten, vor allem in Hinblick auf die Lesbarkeit der Untertitel und die sorgfältige Wahl der Farbgebung.

Technischer Hintergrund des Plug-ins

Das Plug-in überprüft bei Auswahl eines Videos in Storyblok, ob das Video bereits in den entsprechenden Grössen und Codecs vorliegt. Falls nicht, werden diese umgehend generiert. Die URLs der in unserem eigenen CDN abgelegten komprimierten Videos werden zusammen mit Informationen zu den Einstellungen in Storyblok gespeichert. Der verwendete Webservice selbst bleibt dabei für die Endnutzer unsichtbar. Zur Kompression verwenden wir FFmpeg — bereits seit vielen Jahren der Standard für diese Aufgabe. Die genauen Einstellungen hinsichtlich Codec und Grösse sind individuell anpassbar — einmal definiert, werden sie immer passgenau ausgespielt.

Die Vorteile des Ergosign Video Encoder

Zusammengefasst bietet unser Plug-in folgende Vorteile:

• vereinfachtes Content Management für Videos und damit weniger Arbeit für Redakteur:innen

• geringere Fehlerquote

• automatisches Encoding für verschiedene Ausgabemedien und Browser

• schnellere Ladezeiten

• geringere Hostingkosten, durch verringerten Traffic und weniger Übertragungen

Dank der grossen Flexibilität von Storyblok auf Entwicklerseite liess sich unser Plug-in problemlos implementieren und fühlt sich nativ in der Verwendung in Storyblok an. Das Beispiel zeigt, wie flexibel das CMS für Developer ist und illustriert die Möglichkeit der schnellen und einfachen Weiterentwicklung für die Anpassung an die Bedarfe von Redaktion und Performance. Darüber hinaus zeigt das Plug-in, dass unsere Lösungen bis ins kleinste Detail auf die Nutzer:innen und den Anwendungsfall angepasst sind.

Haben Sie auch ein spezifisches Problem und es braucht mehr als eine Lösung von der Stange? Dann sprechen Sie uns an, gemeinsam finden wir einen Weg!