Minor error in Shotcut Credits Overlay HTML (Text:HTML) Generator

Hi there,

I was trying to use one of the http://www.elusien.co.uk/shotcut/ Elusien technology for “Credits Overlay”.

Appears for “Header” … you cannot use the character “&”.
I am aware that in HTML you need & to replace “&” which in this case the generator does generate this code when I enter “&”. However when you run it in Chrome or with SC, the out put output shows “&” instead of just “&”.
Tried a number of HTML tag to try to get around it … just does not work.
I tried and

 tags but still can’t get rid of this “&” generated on output.
Please advise any work around.

Could you please advise how to put “&” for header please.
I works fine for Title and body statements with “&” … just not the header .
See example below text, if you try … you will see what I mean.

Example below the headers is “S&S Visualisers” … you get “S&S Visualisers” when generated.


S&S Visualisers
Film Title | Glimmers of Light
Music Composer | NACCAE
Editors | S&S team
Director of Photography | S&S team

Online Video Reference

NASA The Big Bang video by NASA Goddardm created Jun 27, 2007; |https://www.youtube.com/watch?v=LeUcjqqhNxM

I’ll have a look at this and get back to you later. I have to pop out for an hour or so.

Just looking again at your post and I think the forum software is messing up what you are trying to say. e.g. it says

Could you explain this sentence in words (using the word “ampersand” instead of the character “&” or wrap in in a code block (by using the </> symbol at the top).

Also after the word “Goddard” you have typed an “m” instead of a “,”.

Also, there is nothing to stop you editing the final html file to put back in whatever the generator missed out.

Hi … ah you are right. The forum software remove the “ampersand” that I tried to say appears on just the “header” line. I tried to tweet the HTML code using and

 tags but still could no solve the problem. I am uploading the “converted Credit” html from Elusien framework so you can see what I mean.

Basically I needed & to appear instead &ampersand comes out … maybe there are other tags or something I can tweet the HTML code generated. Your advise is appreciated.
Hmm appears this forum does not t upload HTML file and I don’t have winzip software (mine expired) … so I uploadeda screen shot instead to show the ampersand problem appearing.

Many typos … sorry corrected … and re-upload the image file as it does not seems to appear after I click reply to this.

Basically I needed & to appear instead &ampersand comes out … maybe there are other tags or something I can tweet the HTML code generated. Your advise is appreciated.
Hmm appears this forum does not allow me to upload HTML source file and I don’t have winzip software (mine expired) … so I’d uploaded a screen shot instead to show the ampersand problem appearing.

To upload html add a txt extension to the html file.

Rename Example.html to Example.html.txt. Then upload the file.

1 Like

Thanks Sauron,
I am so NOOBS … here you go the HTML file I generated using Elusien’t framework.

Credits GlimmersOfLightst.HTML.txt (13.2 KB)

OK, I see now. The problem is not in the converter, it is in another of my utilities “TEXTFLOW” that you are using for that line.: data-textflow="{start: vc|5, type: 2}".

The converter is correctly changing the & into &amp;,but the TEXTFLOW utility is treating these 5 characters separately i.e. ‘&’, ‘a’, ‘m’, ‘p’, ‘;’.

I will look at the utility and see what I can do. In the meantime you could remove TEXTFLOW from the heading. If you really want TEXTFLOW you’ll have to wait until I can come up with a fix. Hopefully it won’t take too long.

The HTML is displaying correctly in SC and Chrome.

1 Like

I got confused as well at first. In only displays correctly if you don’t run the animation using my WebVfx.js javascript. I’m in the process of fixing that .

ok thanks Elusien for finding out the faults. I can wait a few days … if not I will do like you said on removing the Text flow for header line.

I have fixed the WebVfx.js code. It will now handle any HTML entity (e.g. &amp; &copy; etc). The new version (version 1.12) is on the WebVfx page of the website (http://elusien.co.uk/shotcut/).

FYI: You can create a ZIP file on Windows by Right-Clicking in a folder and select

New->Compressed (zipped) Folder

Hi Elusien,
You indeed very fast in your support !! …
Thanks a lot.

Here’s my final video clip with this new and fantastic Credits Text using your Elusien’s technic with text flow. What a nice fitting for my first music video … sharing with you this video clip. In this video, I have not use much of Shotcut many great features that I had learnt over the last 8 weeks since I started video editing as a hobby. Working on a few projects now and share out later to all potential ppl wanting to do more video with minimal cost - well is free thanks to Shotcut. Say. I hear you are not incline to music from other threads . but all the same … enjoy.


What a lovely video. I really like the catchy music, very light and uplifting. Not bad at all for a few weeks’ experience of Shotcut. For your next video I’d suggest you do some experimenting with features such as transitions. Have a look at this thread from @jonray: 161 new transitions - using "Mask:From File" as well as the ones hardcoded into Shotcut itself.

I have never paid to zip/unzip anything.
On Mac just right click on a file or files and select COMPRESS “blah blah”.
On Windows, same thing, right click on the file/s and select: Send To --> Compressed (zipped) folder.
Linux also has something similar, just not near a nix box now and can’t remember.

Hi Paul,

Send To --> Compressed (zipped) folder … this works on my Windows 10 PC !! THANKS.

Below does not work for me … no “New” option when I right click.
New->Compressed (zipped) Folder … does not work on my PC

Hi Elusien,

Referring to your comments to use " @jonray: 161 new transitions - using “Mask:From File”"

I am into my 8th week of using Shotcut since I first started with Movie Maker end Feb, then found Openshot … in early March and a week later Shotcut. I did contemplated on using Lightworks after reading a review but decided on Shotcut when I found the thread below that gives me the notion that there are really dedicated ppl focus on Shotcut.

So with that said, I had since try to apply what I learnt from this forum and ppl like Jonray, Paul2, samth, Sauron to name a few and yourself, I had manage to make 2 prior videos as a start. Thanks to all these folks to keep me challenged and learning …

Just to show some of the “mask transition” techniques I’d learnt from Jonray (& flashwords) and GL transition, and the other cool Shotcut filters with keyframe. Now that I have learn Credits/text flow … will apply to all my future videos (those for public sharing).

I also will try out “simple masking” and new transition (really cool in your demo video) that I saw last week. The latter seems not working so well I think … need to try outs.

Sharing what I learnt from shotcut on 2 videos I made recently … amateur quality :frowning:

1st video : 28 Mar (3 weeks after started with shotcut)
about Living in Corona Crisis … my video technique learnt was extremely limited then.

2nd video : 14 Apr (2 weeks later with shotcut)
Vow Renewal … just a sing along with group of friends planning for a trip to a Resort Island next year
(1 to do list during this “social distancing” / lockdown period)

1 Like

Hello @Elusien
Thank you for the updated version of Webvfx: I was experiencing this ampersand bug just now!

But I am afraid there is still a fix needed:
With the typewriter function, the ampersand is now correctly displayed : “&” (the character itself, not by its html code), but on my screen the “&” character is displayed immediately, before the typewriter effect even started… :frowning:
In other words: first you see a “&” on the screen (alone), then the other characters starts to be displayed one by one with the typewriter effect…
Hope it is not too difficult to fix…

Best regards,

Hi … wonder if I can use same topic.

Is there a way to slow down the scrolling of Credits Overlay HTML … I realise that when My credits text gets shorter, the scrolling gets faster !!

I tried to play with the HTML data control tag increasing the value … but does not seems to impact / slow down the scrolling.