whats interesting is that I use qmelt from shotcut download from the website. I also built qmelt and the webvfx and utils from source. running with melt I actual see movement versus the downloaded qmelt. Wondering if it comes down to the version of qt used during compile
The following is my understanding, which may or may not be correct.
Development ceased on QT Webkit, which is used by Shotcut-MLT, in 2013, before the newer CSS animation features became supported. A new framework QT WebEngine, based on Chromium, was being touted as a better replacement.
In 2016 development of QT Webkit was restarted, but there was a lot of work needed to catch up and while it is not quite ready for production yet (there are still some issues with the Windows version) it is available for use and its official release is imminent.
Hopefully once this is officially released in QT it will be incorporated into Shotcut-MLT and we shall all reap the benefits of support for more modern HTML/CSS constructs.
I’ve looked at the website you gave and it may be possible to do something similar for Shotcut videos.
I did at one time think of putting together a set of HTML files as Overlay HTML filters for good looking film titles and film credits for use with my WebVfx.js stuff. People could then, with very little effort and very little knowledge of HTML/CSS/Javascript, modify these to produce some reasonably professional looking beginnings and endings for their Shotcut creations. I know that some people are a bit daunted with HTML and CSS and it would mainly help them.
Unfortunately I got sidetracked doing a fairly large project to produce an app to enable golf club competition secretaries to create and manage golf competitions.
I still have some work to do on the golf app, but it did get me thinking that I could also create an app to simplify creating these Overlay HTML filters. It would be a nice exercise for me to try to do. I’d have to look more closely at the feasibility of doing this, but if it proved too difficult I could always fall back to samples of HTML code that people could edit manually.
I suspect it will be a couple of months before I have the time to make a stab at it,
Hey, great news then I am happy with just html/css samples. I started experimenting with your sample scripts. I think that titles are one of the mostly used feature for HTML Overlay.
What you could also do is post something like a tutorial how to move stuff with Shotcut/HTML/CSS/JS. I got couple of hints from reading your code samples, but would be nice to have a reference how to do this and that with Shotcut, eg. moving stuff around with js,css … ( /* ignored by MLT-Shotcut */)
Hope you don’t mind me stepping in here firstly to say Hi Neil! @elusien - I’m still dabbling with a few video titles using your webvfx framework. And @palica, yes it would be nice to make html/css more user-friendly.
I do agree. to demonstrate this, here’s a short animation (unfinished) I did a few months ago using Shotcut’s Overlay HTML filter and Elusien’s Webvfx framework js file. The text is a bit silly - I did it to experiment with multi-lines of text appearing and disappearing, using percentage keyframes…
And … here’s a screen capture video of the code I used to create it: !!! I certainly looks complicated, although I had no training in HTML/CSS until about year ago and I picked it up from the web and also Elusien on this forum.
Rename it to “WebVfx 1_8.js” (I just did this to make it easy for me to identify the different versions). Alternatively change the text in my html document to make sure the filenames match).
Put the Webvfx file in the same directory as the html file.
Also, specifically for this html file:
It will only work as intended in Shotcut if you apply it to a clip (either video clip of your choice or a color clip) which is 100 seconds long. That’s because this was an experiment to see whether I could apply multiple animations to the text and lines using percentage keyframes, so I set the duration to be 100 seconds. Code for this is:
@palica No problem. Another suggestion (pardon me if you know this already or are experienced in HTML) is to use Notepad++ to view the code. I have it set up with the “dark material” theme.
Wow, looking great as usual, @sauron! Keep 'em coming - you are the Size/position and Mask Master!! Yes, this could be done with html but it would be a lot of code and there’s a big disadvantage - when previewing the animation it always starts from the beginning so it’s very time-consuming when you make a lengthy animation. (Also you need a lot of trial and error to tweak everything into position). Great work!
(I’m guessing that to make the text disappear mid-screen you used two identical background clips and masked out a central rectangle on one?).