Clickable HTML subtitles

Tutorial
1

Hi folks, I’m a tad excited because I’ve just been trying to figure a way, using HTML/CSS, how to create “Clickable Subtitles” - and Yay, here’s my first attempt, which works so far!

How it works - you double-click the file and set a screen-capture program going (ShareX, OBS etc)
Then click on each of the boxes at the top in turn and each line of the subtitles will appear.
The idea is that you can click the boxes in time with the music and the result will be an Mp4 video showing the subtitles appearing at exactly the correct time.

Then you import the MP4 video onto V2 , crop out the coloured boxes and apply a Blend Mode: Hard Light filter. The grey background will disappear and the white text with black drop-shadow will remain.
Way faster than adding individual text clips to a track in Shotcut, although I know it’s probably no easier than using SRT files, something I still haven’t found time to explore…

It’s a work in progress - I intend to make a version with more lines of text to click - 16, maybe 24…
Also I’m intending to try to create a version which allows a fade-out at the end of each subtitle as well as a fade-in at the start of each subtitle, like it has now.

Any comments would be appreciated. Especially from @elusien as to whether I can improve/amend the code. I expect there’s a much easier way to code this using JavaScript but I’m not skilled at that.
Here’s the HTML file (remove the fake TXT extension…
Clickable Subtitles 01CC by JonRay (8 lines).html.txt (5.4 KB)

3 Likes
2

Vous m’étonnerez toujours.

You will always amaze me. :+1:

1 Like
3

Wow!

2 Likes
4

Jon, I haven’t had time to look at it in detail, but you should not have DIVs with the same name e.g.

<div id="clickbox-label">

This goes against the HTML standard. You should change the ids to classes.

1 Like
5

Thanks @elusien - done.

6

Gosh, thanks @namna! I’m working on a version with more lines…

Mon Dieu, merci @namna ! Je travaille sur une version avec plus de lignes…

Cheers Ben!

7

@elusien, just for info, I got the idea of the code from here (the answer with 46 likes). I was amazed when it worked… :

8

Hi @jonray
Nice tool.
I added these lines that turns to black the click-box of the currently active line of text.
I thought it might be a useful reminder in case there is a long pause in the lyrics.

9nWaI1BgRn
9nWaI1BgRn882×219 7.85 KB

chrome_b5DtQCHZIg

1 Like
9

Great idea, @musicalbox. Useful, cool and clever. Thanks!

1 Like
10

Jon, I tidied up the code to make it easier to add more subtitles. I got rid of the IDs and simplified the DIVs. You’ve progressed really well with CSS, so I included some features you didn’t use:

counter-reset : label;

This creates a CSS counter called “label”.

.click-box::before {
    counter-increment: label;
    content          : "Line " counter(label);
    background-color : black;
    width            :100%;
    height           :1em;
    background       :black;
    border-radius    :0.25em;
}

This creates the labels automatically.

.click-box:nth-child( 1) {background-color: blue;}
.click-box:nth-child( 3) {background-color: red;}
.click-box:nth-child( 5) {background-color: limegreen;}
.click-box:nth-child( 7) {background-color: yellow;}
.click-box:nth-child( 9) {background-color: cyan;}
.click-box:nth-child(11) {background-color: magenta;}
.click-box:nth-child(13) {background-color: dodgerblue;}
.click-box:nth-child(15) {background-color: pink;}

This sets the box colours.

.click-box:focus + .text-box {display: block;}
.click-box:focus {background-color: black;}

This does the magic.

Don’t forget you can use the Tab key to select the next button.

The HTML file (with the “.txt” suffix is here
Clickable Subtitles.html.txt (3.8 KB)

1 Like
11

An even simpler HTML file that makes the buttons invisible (by moving them 9999 pixels off the top of the screen. This way the only thing showing on the screen (after a 3 second instruction display) are the subtitles.

You then cycle through the subtitles using the Tab and Back-Tab buttons.

Clickable Subtitles_2.html.txt (3.2 KB)

1 Like
12

Cool! Thanks @eluisin - the counter - increment thing is fabulous! I’ll analyse your code and will learn such a lot. I can’t thank you enough.

Thank you! Yes, I have and there’s a reason - I have the best teacher…! :+1: :grinning_face_with_smiling_eyes:

13

Now that is just WAY off the scale in coolness. What a brilliant idea to control the subtitles with TABS. Thank you!

14

I’ve been thinking again…

We can use this tool while we play the song in the background (no video visible)
But I prefer to actually see the video as well.
For that, I need two windows fitted on the screen. One for the media player, one for the browser.
So I had a lightbulb moment: “Can’t we include the video in the browser window?”

I looked around a bit and found a few lines of code to imbed a video clip inside a HTML page.
As a bonus, there was also a script to add buttons that changes the size of the video.

I modified @Elusien’s last version of the tool and this is the result.


(I reduced the quality and increased the speed so my video can meet the 4-meg forum limit)

I think some people prefer the capture to be full size (1920x1080), but personally I don’t mind capturing a smaller region and using the SP&R filter to move it where I want in the project.

The only problem I see is that after I start the video, I need to click once in the grey area to make the TAB action work. Maybe there is a way to bypass this?

Here’s the modified file, if you want to try it:
Clickable-Subtitles_Elusien-version-2.html.txt (3.9 KB)
(remove the .txt extension)

The format of your video must be MP4
You need to put the html file in the same folder as your video. Also, in the HLTML file, change the current video name for the name of your video (including the .mp4 extension) on line 92.

TPQE27KSXM
TPQE27KSXM743×210 15.4 KB

2 Likes
15

This is essentially what I do in my SRT subtitle generator here → Resources for Shotcut. I also include the audio waveform so you have precise control over when the cue starts and ends.

Screenshot1
Screenshot11887×873 263 KB

2 Likes
16

I should have thought to check your Subtitle Generator. I used it many times to create the subtitles in my tutorial videos.

1 Like
17

Bravo les gars. :+1:
Il ne vous reste plus qu’à écrire les quelques lignes de javascript qui éclateront le texte en plusieurs lignes afin de mettre chaque ligne dans sa div.
On pourra ainsi copier coller le texte complet (avec des retours lignes) et le programme s’occupera du reste. Je pense que c’est très facile pour @Elusien il l’a déjà fait pour un autre utilitaire de @jonray (flipspin)

Well done guys. :+1:
All you have to do now is write a few lines of javascript that will split the text into several lines in order to put each line in its own div.
You can then copy and paste the complete text (with line breaks) and the program will take care of the rest. I think it’s very easy for @Elusien he already did it for another @jonray utility (flipspin) :cowboy_hat_face:

2 Likes
18

@musicalbox - imbedding the video within the HTML file - that is a genius idea - thank you!
Today I added a few more subtitle lines to the HTML file - it now has 64!
I messed about with it - see the short demo I made. The code is a bit messy - I did it in a rush…

SUPERCALIFRAGILISTIC Clickable Subtitles1 by Elusien AMENDED JR 01CC 64 lines.html.txt (13.1 KB)

@musicalbox - intégrer la vidéo dans le fichier HTML - c’est une idée géniale - merci !
Aujourd’hui, j’ai ajouté quelques lignes de sous-titres supplémentaires au fichier HTML - il en a maintenant 64 !
J’ai déconné avec ça - voir la courte démo que j’ai faite. Le code est un peu confus - je l’ai fait à la hâte…

1 Like
19

Indeed, @namna, that would be really great.

En effet, @namna, ce serait vraiment génial.

20

It wasn’t too difficult. Here is the HTML/CSS/Javascript file. Just follow the instructions.

Clickable Subtitles_2.html.txt (3.8 KB)

3 Likes