Shotcut is a free and open-source cross-platform video editing application for FreeBSD, Linux, OS X and Windows. Started in 2011 by Dan Dennedy, it is developed on the MLT Multimedia Framework, in development since 2004 by the same author. WebVfx, GL-Transitions and Video-Credits are frameworks I have put together to simplify creating various effects. Click on their links above for instruction on using them.

Shotcut's Overlay HTML Filter

One of the filters provided in Shotcut is the Overlay HTML filter. Such a filter is simply an HTML webpage and its associated javascript and CSS code. What appears on the webpage overlays the video clip to which the filter is applied. Of special interest is that any part of the webpage that is transparent will also be transparent on the video rendering and the underlying clip will show through, which is particularly useful for video titles and credits. It can be used in two modes:


Although the Javascript interface to Shotcut's webvfx is not difficult it may be a bit daunting to users who have no, or rudimentary experience in Javascript. To make it more accessible to users I have created a framwork (also, confusingly I'm afraid called Elusien's WebVfx Framework) that hides the Javascript behind a more simple HTML inferface. This enables the user to create an animated webpage without needing to know any Javascript, develop this using a modern browser (preferably Google Chrome) with its various development tools, then use exactly the HTML and CSS code as an Overlay HTML filter in Shotcut. The webkit engine used by Shotcut to render the webpage is somewhat out of date. Dan is working on updating this in a future release of the product. This means that some of the newer HTML5 3D transforms are not available and those that are have to be prefixed in the CSS by the string '-webkit-' (e.g. transform: scale(0, 0) rotate(-180deg); becomes -webkit-transform: scale(0, 0) rotate(-180deg);).


A transition is a technique used in video editing by which scenes or clips are combined. There is an open-source initiative at to provide GLSL shader programs to effect various different types of transition. GLSL is an OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline, which is usually a Graphics Processing Unit (GPU). These shader programs (or Fragment Shaders as they are termed) effectively operate on pixels that come from two sources (usually two clips) and create a target that is some mathematical operation involving these pixels.

WebGL is an implementation of OpenGL ES 2.0 for the Web and is supported by Shotcut's webkit engine. It is a JavaScript API providing tools to build rich interactive animations onto a <canvas> HTML element. Shotcut's development plan has within it enhancements to incorporate all of these shader programs into the transitions section of the product. But this is not so simple to do and is probably going to take a while to be released. Iterfacing these shader programs to Shotcut is not for the faint-hearted, so in the meantime, until they are in the product, I have created a system to hide the complexity from Shotcut users, by creating a simple Overlay HTML filter, like I do with my (Elusien's) WebVfx Framework. Unfortunately it is only possible for my system to get the pixels from one source, not two and consequently it cannot produce exactly the transitions shown on the gl-transitions website. However, by applying the Overlay HTML filter to a Shotcut transition, rather than to a clip, it is possible for some of them (e.g. 'swirl' and 'pixelise') to produce a good result and others (such as 'cube' and 'InvertedPageCurl') to produce a reasonable effect, while others (such as the 'BowTie' effects) produce no result at all.


My system makes it possible to input parameters to modify the various aspects of the transition. Be very careful to get the changes right. The filter uses the GPU, which is not very good at recovering from bad coding and it is possible to crash/hang Shotcut if bad values are entered for the parameters. Before applying one of these Overlay HTML filters it is a good idea to save your project, just in case.


Thanks to:


The Overlay HTML Filter lends itself well to producing reasonably professional-looking video credits, both scrolling and static. It can however be a bit daunting for users with little or no experience of HTML, CSS and Javascript. I have therefore put together a webpage that allows a user to easily specify the raw data for the credits as well as being able to tailor the way that these credits are manipulated. The output is an HTML page that can then be used in Shotcut as an Overlay HTML filter.