Shotcut - Elusien's Contributions

Resources

Various files and utilities

Contributions

These are Elusien's contributions to the open-source Shotcut Video Editor

OBS Animation

Animation using OBS instead of WebVfx

SubRip Subtitles

SubRip Subtitle Generator

CSS3 Animations

Shotcut CSS Animations Overlay HTML Filter Generator

Filters

Elusien's Shotcut Video Filters

WebVfx

Elusien's Shotcut WebVfx Framework for Overlay HTML Filters (Text: HTML) Animation

GL-Transitions

Shotcut GL-Transition Overlay HTML Filter Generator

Video Credits

Shotcut Video Credits Overlay HTML Filter Generator

WARNING

Many of the technologies described here (marked "") use Shotcut-MLT's WebVfx javascript framework. This is based on QtWebkit, a technology that has not been supported in Qt for some years. Shotcut-MLT versions following version 20.07.11 use a more up-to-date (supported) version of Qt and WebVfx had to be discontinued. So for newer versions these technologies will no longer work. "Animation using OBS", is a workaround to compensate somewhat for the demise of WebVfx.

Shotcut

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/ Text: HTML

THIS IS NO LONGER AVAILABLE IN VERSIONS OF SHOTCUT AFTER VERSION 20.07.1

One of the filters provided in Shotcut is the Overlay HTML (or Text: 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:

Resources

This is a bit of a hodge-podge. It contains various files, tutorial videos and HTML/Javascript files for doing things such animating paths in SVG file.

Animation in OBS

Because WebVfx will disappear from Shotcut after version 20.07.11, this workaround has been developed to enable HTML/CSS3 animations to be applied to video clips.

Subrip SRT Subtitles Generator

This generator creates SubRip SRT subtitles that can be added to AVI, MP4 or MKV containers etc., or can be "burned into" video files themselves. It is less complicated to use than most others, incling Aegisub.

CSS3 Animation Overlay HTML Filters

THIS IS NO LONGER AVAILABLE IN VERSIONS OF SHOTCUT AFTER VERSION 20.07.1

CSS3 Animations do not "play" well with Shotcut, due to the lack of synchronisation between CSS and Shotcut's processing of frames. There is a new web technology proposed called Web Animations API and a javascript polyfill for this has been produced to enable it to be used in old browsers (such as the one Shotcut uses), see https://github.com/web-animations/web-animations-js.

Filters

THIS IS NO LONGER AVAILABLE IN VERSIONS OF SHOTCUT AFTER VERSION 20.07.1

I have developed several video filters. I have also provided several user interfaces to other filters that did not have them previously. This webpage lists them.

WebVfx

THIS IS NO LONGER AVAILABLE IN VERSIONS OF SHOTCUT AFTER VERSION 20.07.1

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);).

Video Credits

THIS IS NO LONGER AVAILABLE IN VERSIONS OF SHOTCUT AFTER VERSION 20.07.1

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.

The webpage on this site provides a simple way of creating reasonable looking video credits. You tailor the credits to your liking, using various fonts, font-sizes, colours and styling, then you press a button to create an HTML file that you feed into Shotcut's Overlay HTML (Text: HTML) filter to generate the relevant clip for your movie - simple!

GL-Transitions

THIS IS NO LONGER AVAILABLE IN VERSIONS OF SHOTCUT AFTER VERSION 20.07.1

A transition is a technique used in video editing by which scenes or clips are combined. There is an open-source initiative at gl-transitions.com 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.

Caveat

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.

Acknowledgement

Thanks to: