HTML5 is a great tool for video effects and animations. You’ve read it right. Maybe it’s not an obvious choice for video editing, but it can be extremely robust. Read more & learn how exactly you can use HTML5 for video.
So far at Tellyo we developed the cloud video editing tool, that allows to mix live stream recordings, mobile captures and clips from external feeds. To give the videos a more professional look and feel, we have recently implemented the audio-video transitions feature.
The Challenge
But what if you could add any animated graphics to your videos? Both as a title clip and overlay? In other words: bring the professional TV production values to internet video content. At Tellyo we dug into this subject and tried out all the solutions available for the Mlt (aka Melt) Framework, that we are using as our video backend. As a simple proof of concept we’ve prepared a highlight reel from one of Poland’s pre-Euro friendly games. (Finland didn’t stand a chance.)
So, what’s the technology behind this video compilation with text/graphics overlays?
We ended up using HTML5, but we had a hard time to choose the best possible solution.
Hard start
The most obvious choice for our video backend was to use Pango text overlays. These are the standard Linux GTK text widgets rendered on top of the video. The upside of this approach is its ease of implementation. These so-called producers require almost no configuration at all and come pre-installed with MLT. But if you really want to go beyond simple text captions, Pango is lacking the advanced features. You cannot use any custom graphics and even the text rendering options are limited to simple outline or colored background.
Our second shot was to go for Qt5 overlays, well known from the open-source KDE Linux desktop and the Kdenlive video editor. These widgets are a bit more customizable. Additionally, the qt-rendered text provides more cool-looking results then the good old GTK. But still, the flexibility of this solution is very limited. For instance, every overlay element must be manually positioned and the text effects include only simple outline and blur.
Kdenlive title editor, which can create Qt5 text overlays
SVG – almost perfect, but only for still images
A solution that was close to match our requirements was SVG. Imagination is the only limit with this approach. You can create any vector graphics asset with beautiful crafted text and all kinds of advanced effects. SVG provides a clean, standardized, open format for any kind of vector graphics assets. You can export it from numerous editing apps like the open-sourced Inkscape. Having the SVG background transparent, you can easily add it as clip overlay.
See the Pen Animated signing of signature (SVG paths) by Gary Hepting (@ghepting) on CodePen.
But one key feature is still missing when you overlay SVG on a video – animations. SVG has it’s own animation description language known as SMIL, which provides keyframed transitions. That’s cool, but only if you view this kind of animation in a standalone web browser. There is no reasonable way to sync the SMIL animation with a background video.
Solution for animated overlays? HTML5
Fortunately there’s a solution for animated video overlays. WebVfx – a framework that allows video effects (filters, transitions etc.) to be authored using web technologies HTML5, CSS3 and JavaScript. It’s all about managing and processing a comprehensive, non-interactive multimedia composition of the webpage layer and the video itself. In Tellyo Pro our backend does all this magic. First, it renders the complete webpage layer with the Webkit engine (like in Google Chrome or Safari browser). Then it’s overlayed on top of the mp4 video producer.
Take a look at the Javascript WebVfx code example – a simple video a producer with animated text shadow.
With that kind of approach, we can provide a tv-like graphic overlays for your content. We’ll be able to design custom graphic templates for any user of Tellyo Pro. There will be some predefined ones too, ready to use for everyone.
Why not Adobe Flash?
Adobe’s software is expensive & proprietary. It generates animations in a closed-binary format. While HTML5 is open and available for every major web rendering engine without any extra plugins. Yes, Adobe’s technology produces some amazing-looking results. But nowadays the google-amped Javascript rendering engines are getting more powerful. Hence, the feature and performance gap is closing up.
Simply put: Flash is (or will be) dead, long live HTML5.
Anyway if you already have your assets in SWF files, it’s possible to mix them with the video using our video framework (swfdec module for Melt).
Desktop vs Cloud
OK, but why can’t I just use some desktop video editor like Adobe After Effects or opensource Shotcut/Kdenlive? (Btw, take a look at those great overlay examples). Of course, if you are a video professional willing to work long hours to achieve the best possible effect, the desktop video editor is the way to go.
But you can also take the best out of two worlds. First, do complex animations with the desktop tool (like Tumult available on OSX). Second, export them to our cloud video backend, exactly like you would do that in Shotcut desktop video editor.
But if ease of use, intuitive UI and, most importantly, time matters, we believe that web video authoring apps are a great alternative to desktop tools like Shotcut. You don’t need to keep huge video assets on your laptop. Tellyo Pro will also do the whole performance-sucking video transcoding job. Our app relies on the fastest available codecs, video tools and powerful Amazon-based cloud servers. You can even clip directly from the live video streams.
Tellyo Pro video editor in action
There’s a free demo of Tellyo Pro if you’d like to give it a go. Remember to bookmark the blog too to stay up to date with future tips. HTML5 animated overlays are coming in a few weeks!
