Somewhere in 2016 we began researching a way to replace an outdated and heavy component, which we no longer maintained, but one that was quite popular with customers, who needed to overlay dynamic and animated graphics—the Flash Overlay Plugin. We spoke with Carlos Alberto Phelippe, System Analyst from Digilab about his experience integrating the new approach into their product development and content creation process.

Digilab is a Brazilian company, whose primary area of business are solutions to manage and distribute content for linear TV programming, VOD and OTT platforms. Digilab’s customers make heavy use of graphics in their scenarios—not only channel branding and traditional lower thirds, but also animated tickers and advertisements.

The company has chosen Medialooks MPlatform SDK as the basis for their video software business in 2013 and has been using our Flash Overlay Plugin for animated graphics since then. Despite a number of benefits, Flash was no longer sufficient for the scenarios in place. In 2017 Digilab licensed our new HTML5 Plugin and by now has completely removed Flash from the company’s new products. This has allowed Digilab to dramatically improve performance while maintaining the key advantages previously available with Flash: low file size, ease of content creation and full control over dynamic data.

Your product is the best. It is a mature and easy-to-use SDK to work with video and audio. It also has the best support.

Challenges and objectives

Digilab’s customers require that they can add a lot of dynamic information to their video—the number of such overlays would often be as much as 20 or even more. Since 2013, the company had been using SWF files (Adobe Flash) for animated overlays—which is a great solution since a complex animated sequence is packaged into one small file. Also, Adobe provides great tools to create such animations, as well as there’s talent available for creative work.

Using Flash, I can write an ActionScript to read an XML file, and I have a dynamic animation.

The Flash Overlay Plugin was developed by Medialooks by means of communicating with the ActiveX control provided with the Adobe Flash Player. Due to the fact that the plugin had to rely on a third-party object, there remained CPU usage issues that we could not resolve: the solution worked fine for a limited number of overlays, but, at Digilab’s scale, lead to CPU overhead and increased memory usage, which was not acceptable for the application.

In order to improve the stability of the solution, we developed a way to use the Flash Overlay Plugin in an external process, making it possible to programmatically control its status and restart when needed. This, although having provided improved stability, did not resolve the CPU usage: a single Flash animation would consume up to 40% of CPU; and Digilab’s goal was to run two channels on a single PC.

Another approach that we tried together with Digilab, was using image sequences and video files with transparency. Performance and memory usage were fine, but the content would require too much space on the hard drive: to put it in perspective, 3 seconds of scalable animation in SWF format would consume 1 MB of disk space while a transparent QuickTime full HD file would require 50–100 MB. Another disadvantage of image sequences was the need to manage multiple files with the overlay content.

The HTML5 Plugin

In context with this behaviour and understanding that Flash as a product was approaching the end of its life cycle, we researched and implemented a new solution—naturally, based on HTML5.

The first version of the product was not good enough: it looked interesting, but performance was poor.

Later, the plugin was optimized and we made some initial tests with overlay scenarios. We discovered problems with memory usage and with scaling of a webpage, but with the assistance of Medialooks’ support team we received proper fixes for the problems, and now we can use the HTML5 Plugin in our processing.

Digilab discovered a way to convert Flash animation project files (.FLA) to HTML5, which is explained in the Adobe Blog. Although this adds an extra step in the content preparation process, Carlos believes that the overall benefits are definitely worth it.

We have reviewed the results of this transition according to the following criteria:

• Number of files. With Flash, customers could use just one SWF file for all the animations and scripts. With the HTML5 Plugin several files are used—usually around 3.
• Size of files. The size of files with HTML5 are about the same as with Flash (for the same animation).
• CPU usage. Highly improved compared to Flash: around 15%.
• Memory usage. Memory usage is stable with no leaks, which makes the overall application stable.
• Control over data. Full control over the animation’s sequence and data flow is provided by both Flash and HTML5.

In terms of stability and performance, HTML5 is much better. For animation overlay, we’ll use the HTML5 Plugin in all new projects.

About the HTML5 Plugin

The plugin is based on the Chromium Embedded Framework (CEF)—a framework for embedding Chromium-based browsers in other applications. Medialooks has implemented CEF in order to provide customers with a way to use HTML5 for their graphics. Later, Medialooks made it possible to simply capture web pages as if they were a live video source: anything that can be rendered in the Chrome browser, can now be processed as frames inside of a Medialooks video SDK. The following features are available with the HTML5 Plugin:

• Advanced graphics and animations overlay.
• WebGL graphics overlay.
• Control of the overlay behaviour and dynamic data with JavaScript and commands.
• Capturing of a web page as if it were a live multimedia source (with audio).

See also

• The HTML5 Plugin product page
• Visit Digilab