Hi folks, I recently posted four animated video titles I created using HTML/CSS/WebVfx code, then importing them into the Overlay HTML filter in Shotcut, and finally exporting as an mp4 video.
I have just created another animated title (#5) -“Bournville - 100 Years of Photographs”. I’m happy to share it here a) to get feedback, and b) to show users how to use this feature themselves. Then maybe you would like to experiment and personalise your own video title by changing key parts of the html code.
Here is the video, exported directly from Shotcut:
https://streamable.com/a77kx
Here is my html code, uploaded to this forum as a text file (.txt):
Video title Bournville 100 Years of Photographs by Jon Raybould.txt (6.2 KB)
I’ve written a step-by-step tutorial to help anyone who’d like to investigate this further:
Tutorial: Using the Overlay HTML filter to import an animated video title (or any HTML file which has been coded to use Elusien’s WebVfx java file).
(Note: I use Windows 10 and Chrome browser).
Stage 1 - Downloading my test file and the webvfx file.
-
Create a new folder and give it a unique name (eg Video title from Shotcut forum).
-
Download the .txt version of my html code (see the above link) to that folder.
-
Save it as a .html file. (eg. - open the .txt file in notepad, go to “save as”, delete just the .txt extension and replace it with .html, hit “save”).
-
Go to http://www.elusien.co.uk/shotcut/ and download Elusien’s webvfx.js file and place it in the same folder as above. (NB this is important - this process won’t work without doing this step).
-
Double-click on the newly-saved .html file. Your browser should open, and in a few seconds after it loads you should see my animated “Bournville” video title appear and play, with moving (zooming) text, moving coloured boxes etc. (NB you’ll probably see scroll-bars appear - this is because my html code gives the animation a resolution of 1920 x 1080 pixels (the default size in Shotcut - required for the next stage) and the browser adds scroll-bars if your monitor is smaller than this. To see the animation full-screen, go to step 6) below).
-
(If you see scroll-bars) - Repeatedly press Ctrl/- (ctrl/minus) (this is if you are using Chrome - it may be the same on other browsers) to reduce the zoom level of your browser. Or: settings>page zoom (Chrome) then change the settings. I found that 80% works fine on my desktop monitor but I needed to set it to 67% on my laptop).
-
If the text “Bournville” doesn’t appear, perhaps you haven’t got the font “arial” on your computer. If so you can specify the font by changing the code. Where it says “font-family:arial;” change “arial” to a font installed on your computer.
Stage 2 - Importing the html file into Shotcut.
-
Open Shotcut.
-
Go to File>Open Other>color>color, choose a colour (any colour will do - it will be overlaid with the background colour of the html file). Then OK, then OK.
-
Click and grab the blue slider bar and drag it quite a way to the left, until the clip is as close to 10 seconds long as you can get it. It doesn’t have to be PRECISELY 10 seconds. (Note - it’s got to be 10 seconds because there’s a code in the html file reading - “data-control=10:60”. This means that the timings of the animation I created were based on the whole thing to be 10 seconds long at 60 frames per second. So setting your clip length in Shotcut to 10 seconds will give you the same effect as you see in the browser - ie the animations will change at the same rate, or speed that I intended when creating the animation).
-
Select the Playlist tab. Click in the preview pane, and drag it into the Playlist. Then click and drag it from the Playlist into the timeline. Or click “+”. (Alternatively, just drag straight into the timeline, missing out the Playlist step). A clip with duration 10 seconds appears.
-
Press “Home” to move the playhead to the beginning of the clip, select the clip so its boundary turns red, select the “filters” tab, then apply an Overlay HTML filter to the clip.
-
Click the option “Use WebVfx java extension”, then click “Yes” when the alert box “Confirm Selection” appears with a messge for Advanced Users.
-
Select “Open” and navigate to my html file. (Just check you have the webvfx.js file in the SAME FOLDER as my html file).
-
The preview pane should change to a dark blue colour (the background colour of my html file (#000567, the code for a certain hue of dark blue)).
-
Press “play” (shortcut:spacebar) - and the animated title should appear and play in Shotcut!!! (NB the playback may be stuttery, depending on the power specifications of your computer and how much work Shotcut has to do to show the animation. I suggest you check “Settings>Realtime (frame dropping)” is checked in Shotcut. Rest assured, though, the exported (rendered) file will be OK.
-
Select the Export tab. I suggest you choose 60 frames per second (but you could try 30 fps) and hit “Export File”. Choose a filename, hit “Save”, Go off to put the kettle on, and when you return, the animation will have rendered to your computer to an mp4 or whatever you set it to export to.
TA - DAH!!
The next thing you could try is to adapt/experiment with my original html file to personalise it to your requirements ie change the font, change the colours, change the text etc etc. I’ll try to find time to post again with help with this, but in the meantime I hope this is helpful to anyone interested.
I’d just like to add that my grateful thanks go to Elusien for his brilliant Webvfx framework and all the help he gave me with this over the past weeks on this forum.
Regards,
Jon