Workaround for adding hardcoded subtitles in ShotCut?

ravenclaw · June 8, 2018, 8:49am

Excellent! That does the job i think. Now the only thing remaining is how to export that video from Aegisub. If there is a better workaround than using a screen recording software, please let us know.

QDSOV · June 8, 2018, 2:16pm

I can’t help you there I’m afraid, but I did just find another player you might want to look at.

http://www.softpedia.com/get/Multimedia/Video/Other-VIDEO-Tools/Penguin-Subtitle-Player.shtml

Elusien · June 8, 2018, 3:32pm

This is an interesting project

I will look into modifying my WebVfx framework to enable subtitles in “srt” or “vtt” to be easily incorporated into a video using it. Hopefully I’ll be able to get a working version created sometime during this coming week - I’ll let you know when it’s available.

sauron · June 9, 2018, 1:43am

You could create a green or blue screen video, then use Handbrake to hard-code the subtitles to the video.

shotcut · June 11, 2018, 2:06am

There is a filter in the engine that can help, but there is an issue with respect to trying to “cut” the subtitle:

Still, this might be a useful filter for some use cases.

Elusien · June 23, 2018, 6:57pm

@ravenclaw, @berni, @stanglow, @nwgat, @jonray, @sauron, @qdsov,

I have modified my WebVfx framework to enable subtitles (in Subrip .srt file format) to be hardcoded onto videos using the Overlay HTML feature (see: WebVfx HTML Overlay Filters Update - Slideshows, Exploding Text). This is version 1.5 of the framework.

I tried several ways of reading an .srt file in javascript, but although some of them worked in the browser, none of them worked in Shotcut itself. So the contents of the .srt file have to be copied into a <pre></pre> tag in the HTML itself. See below and the example on the website: http://www.elusien.co.uk/shotcut/.

If you apply the subtitle to a video and then edit that video (e.g. by deleting a clip) then of course the subtitle cues will no longer match up to the speech on the video. You will either have to recreate the .srt file anew, or use a Subrip editor to edit the cues (see the documentation on my website). Another possibility would be to create a video with just the subtitles on it, then use this as a second track in Shotcut and whenever you cut the main track you would do an identical cut to the subtitle track.

You can use CSS to position and style the subtitle in whatever way you want. The example on the website shows two copies of the subtitles, the one at the top of the screen in white on a semitransparent dark background, while the one at the bottom of the screen is in white with a dark outline on a totally transparent background.

The basic HTML to create the example is:

<body data-control='40:30'>
	The subtitles appear at the top (#srt1) of the screen and also at the bottom (#srt2).
	<div id='st1' class='webvfx' data-subtitles='subtitles'></div>
	<div id='st2' class='webvfx' data-subtitles='subtitles'></div>
	<pre id='subtitles'>
1
00:00:04,000 --> 00:00:15,400
This is the 1st subtitle 04sec to 15.4sec
Mary had a little lamb,
its <i>fleece</i> was white as snow
and everywhere that Mary went
that <b>lamb</b> was sure to go!

2
00:00:16,600 --> 00:00:25,800
This is the 2nd subtitle 16.6sec to 25.8sec

3
00:00:20,600 --> 00:00:23,800
This is the 3rd subtitle 20.6sec to 23.8sec

4
00:00:24,600 --> 00:00:30,800
This is the 4th subtitle 24.6sec to 30.8sec

</pre>
</body>

Have a play with the source code on the website (including the CSS) and let me know what you think.

jonray · June 23, 2018, 10:36pm

Great stuff, Neil! I was thinking about adding subtitles to a 7-minute video featuring one of my songs, and I think this will help greatly, Will try to experiment when I can but the problem of lack of time has recurred. ( I’m just experimenting with applying the mask filter to text, inspired by sauron’s work. )

Will get to it when I can. Still haven’t got round to playing with your exploding text either…

Thank you for your brilliant work on this.

sauron · June 24, 2018, 1:37am

I tried the subtitles overlay with a video that I had subtitles for. The subtitles work but the first 4 lines of subtitles are showing on the left side of the video.

I tried an export and the 4 lines show in the export as well.

Is this a flaw in the code or did I mess up when I added my srt file to the code?

ravenclaw · June 24, 2018, 7:51am

Thanks a lot. I will try this in a couple of days and get back.

Elusien · June 24, 2018, 3:16pm

The code should make the subtitle <pre> element with the subtitles in it invisible.

I’ll check to see what has gone wrong. In the meantime put the following in your CSS:

pre {display: none;}

Elusien · June 24, 2018, 7:09pm

The WebVfx.js javascript file has been updated (v 1.6) on the website to include the fix mentioned above.

sauron · June 24, 2018, 8:49pm

This fixed the issue. Subtitles are working well.

ravenclaw · July 14, 2018, 3:05am

I followed your method and put following code in overlay html filter (saved as test.htm)

   <!DOCTYPE html><html><head><meta charset="UTF-8">
  
    <script src="qrc:/scripts/jquery.js"></script>
    <script src="qrc:/scripts/rangy-core.js"></script>
    <script src="qrc:/scripts/rangy-cssclassapplier.js"></script>
    <script src="qrc:/scripts/htmleditor.js"></script>
    <script src="./WebVfx.js"></script>
  </head>

  <body style="font-size: 25pt;" data-control="40:30">
  

	The subtitles appear at the top (#srt1) of the screen and also at the bottom (#srt2).
	<div id="st1" class="webvfx" data-subtitles="subtitles"></div>
	<div id="st2" class="webvfx" data-subtitles="subtitles"></div>
   <pre>
	<pre id="subtitles">1
00:00:04,000 --&gt; 00:00:15,400
This is the 1st subtitle 04sec to 15.4sec
Mary had a little lamb,
its <i>fleece</i> was white as snow
and everywhere that Mary went
that <b>lamb</b> was sure to go!

2
00:00:16,600 --&gt; 00:00:25,800
This is the 2nd subtitle 16.6sec to 25.8sec

3
00:00:20,600 --&gt; 00:00:23,800
This is the 3rd subtitle 20.6sec to 23.8sec

4
00:00:24,600 --&gt; 00:00:30,800
This is the 4th subtitle 24.6sec to 30.8sec

</pre>

</body></html>

It is working as expected I think, as it is showing different text at different times.

Thanks a lot. I will now try to figure out the best way to position them centre aligned and bold, black on white appearance (like usual subtitles)

ravenclaw · July 14, 2018, 3:05am

What does this part in code do? Does it have to do with screen resolution?

ravenclaw · July 14, 2018, 3:13am

I dont know what I have done wrong in html code but it is showing some subtitles twice, as in below screenshot

is this expected?

(ping to @Elusien)

sauron · July 14, 2018, 3:37am

The first value is the clip length in seconds, the second value is the frame rate in fps.

sauron · July 14, 2018, 4:01am

Here’s an example of the subtitle file I created that works.

Subtitle example.txt (956 Bytes)

Elusien · July 17, 2018, 8:58am

Sorry, having the downstairs of the villa re-tiled and staying at a friend’s who doesn’t have Internet.

You have 2 DIVs (id=‘st1’ and id=‘st2’), each one will receive the subtitles, which is why you are getting it twice.

Just remove the ‘st2’ one.

Leonelle_Marks · April 23, 2020, 8:15pm

Hello guys…
I have an issue close to the mentioned one above…
I use HTML Text to subtitle video (into Arabic) from 0, and I have to select separated HTML files each time to add new subtitles to video otherwise the text I input will apply to all subtitles on video which is very annoying.
I prefer using HTML because it gives high-quality subtitle unless Sample Text
I’m using Windows 10 (1909) latest version and Shotcut 20.04.12.
Any suggestions will be much appreciated

Elusien · April 23, 2020, 9:21pm

Did you try using the utility I put together which uses a single Text:HTML (HTML Overlay) filter file, with the subtitles and their timing specified on it. See here: http://elusien.co.uk/shotcut/webvfx/index.php and click on the “Subtitles” tab in the Features, Documentation and Examples sections.