The custom video encoder for Storyblok - developed by Ergosign

To ensure perfect video content management via Storyblok's CMS, we have developed a tailor-made video encoder plug-in, which we would like to introduce in more detail in this insights article.

How did the plug-in come about?

Video content is becoming increasingly important for digital presences as it simplifies processing of information for users and increases retention time. However, video content poses a challenge not only for content creation, but also for website content management. Not all formats and codecs are suitable for online use, and very few browsers are compatible with all codecs. Additionally, the quality and size of the file must be perfectly balanced. Large files lead to long loading times, which can have a negative impact on the user experience and Google ranking. Optimal viewing across different devices, screen sizes and data transfer rates also requires special attention.

The right choice of CMS can be crucial here. In order to create a DXP that is tailored precisely to the customer needs, Ergosign uses various state-of-the-art technologies. This also includes several content management systems, such as Storyblok. This CMS impresses with an excellent editor experience and offers our customers numerous advantages, this includes the fact that content management for images and graphics was appreciated. However, we have found that, as with most CMS, content management and video encoding still has room for improvement. However, Storyblok's asset management for images and graphics is great, which is why we didn't opt for integrating with an external app with an all-in-one approach.

Instead, we have developed a plug-in that can be seamlessly integrated into Storyblok that handles and simplifies both video encoding and content management. Of course, we don't just keep this plug-in for ourselves: in the future, we also want to offer a license to use the plug-in and the cloud service we developed for it.

Codecs, devices and error rates in video-content-management

Using a web service we also developed, our plug-in automatically encodes videos in any number of different codecs and provides editors with helpful feedback on file size and expected loading time for end users. We currently have defined three codecs that cover all common browsers: H264 (for older devices with weaker graphics), VP9 (for Safari and Firefox) and AV1 (as the new industry standard and for Chrome).

Additionally, it encodes for three screen sizes: 768px, 1280px and 1920px, meaning that the optimal resolution for (if you counted, you already know) nine different application areas are pre-rendered. However, defining target sizes is completely flexible, but we find the three sizes mentioned to be sensible.

This leads to an acceleration of loading times of 50-80% (!) on every website, as the respective variant is automatically displayed on the correct output medium. The “Responsive Video” custom block we developed helps with this. In addition, this saves data volume because instead of uploading different versions of the same video and manually attaching different requirements, our plug-in does everything automatically with just one video version — significantly reducing traffic and with an error rate towards zero for editorial team. Video encoding can get very technical – and frustrating – very quickly! - and that doesn't always match the skills of the editorial team - we are proud to be able to contribute to a better editor experience in this way.

When it comes to usability, our plug-in is in no way inferior to Storyblok's content management for images: Videos are integrated into the Storyblok asset system, so you don't have to search in different places. Once a video is selected, a preview is generated. This means editors know exactly what it will look like for users.

Recommendations for accessible video content:

Adhering to accessibility standards when creating video content is crucial to ensuring your message reaches the widest possible audience, as accessible video content expands your target group. You can achieve this improvement by adding subtitles and transcripts to your videos. Audio descriptions are crucial for videos with visual elements or scenes without dialogue. Equally important is the creation of sufficient contrast, especially with regard to the readability of the subtitles and the careful choice of color.

Technical background of the plug-in

When you select a video in Storyblok, the plug-in checks whether the video already exists in the appropriate sizes and codecs. If not, they will be generated immediately. The URLs of compressed videos stored on our own CDN are stored in Storyblok along with settings information. The employed web service remains invisible to the end users. For compression we use FFmpeg — the standard for this task for many years. The exact settings regarding codec and size can be individually adjusted - once defined, they are always played out precisely.

Advantages of the Ergosign video encoder

In summary, our plug-in offers the following advantages:

• Simplified content management for videos and therefore less work for editors

• Lower error rate

• Automatic encoding for various output media and browsers

• Faster loading times

• Lower hosting costs, thanks to reduced traffic and fewer transfers

Thanks to Storyblok's great flexibility on the developer side, our plug-in was easy to implement and feels native to use in Storyblok. This case shows how flexible the CMS is for developers and the possibility of quick and easy further development to adapt to the needs of editorial and performance. In addition, the plug-in shows that our solutions are adapted to the users and the use case down to the smallest detail.

Do you also have a specific problem that requires more than an off-the-shelf solution? Then talk to us, together we will find a way!