Subtitles aren't being burnt into the video | embedding srt into video frames

[DeanVanGreunen]

Describe the bug I'm trying to burn a subtitles.srt file onto the video (having the subtitle embeded within the frames themselves)

To Reproduce

both `input.mp4` and `subtitles.srt` are available to the WASM FFMPEG FS
const converted = await ffmpegRef.current.exec([
    '-i', "input.mp4", // Input File
    '-i', 'subtitles.srt',  // Burn subtitles into video
    '-vf', 'subtitles=subtitles.srt',  // Burn subtitles into video
    "output.mp4" // Output File
]);

Expected behavior The Subtitles should be burned into the video.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 122.0.6261.94 (Official Build) (64-bit) (cohort: M122 Rollout)

Additional context Example extract from the subtitles.srt file

1
00:00:00,280 --> 00:00:01,379
Hi,

2
00:00:01,379 --> 00:00:01,679
and

3
00:00:01,679 --> 00:00:01,980
welcome

4
00:00:01,980 --> 00:00:02,200
to

5
00:00:02,200 --> 00:00:03,220
ClipDrop.

6
00:00:03,799 --> 00:00:03,919
Congratulations

7
00:00:03,919 --> 00:00:04,400
on

8
00:00:04,400 --> 00:00:04,719
being

9
00:00:04,719 --> 00:00:05,040
selected

10
00:00:05,040 --> 00:00:05,259
to

11
00:00:05,259 --> 00:00:05,480
do

[syjf]

hi, did you mention can't find selected font provider when adding subtitles

[DeanVanGreunen]

Hi, yes the fix was setting the fontpath using the filter options as such

let result = ffmpeg()
            .addInput(this.inputFile)
            .addOptions([
                `-vf subtitles=${this.subtitleFile}.srt:${this.forceStyleFormatData}:fontsdir=${this.fontDirectory}`,
            ])
            .addOutput(this.outputFile)

[syjf]

嗨，是的，修复程序是使用过滤器选项设置字体路径

let result = ffmpeg()
            .addInput(this.inputFile)
            .addOptions([
                `-vf subtitles=${this.subtitleFile}.srt:${this.forceStyleFormatData}:fontsdir=${this.fontDirectory}`,
            ])
            .addOutput(this.outputFile)

hi,Do you mean to set your own font and style? Is the subtitle file of. ass the same as adding text

[syjf]

Hey, brother, why can't I do this? Is there a problem

[DeanVanGreunen]

@syjf fontsdir should be an absolute path to the fonts directory also you need to supply the forceStyleFormatData

example command be like

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000,Outline=,BorderStyle=,Shadow=,Bold=0,Italic=0,Underline=0,StrikeOut=0,:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

or if you only have some values then

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000,Bold=0,Italic=0,Underline=0,StrikeOut=0,:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

[syjf]

fontsdir 应该是 fonts 目录的绝对路径，您还需要提供 forceStyleFormatData

示例命令 be like

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000,Outline=,BorderStyle=,Shadow=,Bold=0,Italic=0,Underline=0,StrikeOut=0,:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

或者，如果您只有一些值，那么

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000,Bold=0,Italic=0,Underline=0,StrikeOut=0,:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

Good brother, thank you very much. I have already resolved it

[syjf]

@syjf fontsdir should be an absolute path to the fonts directory also you need to supply the forceStyleFormatData

example command be like

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000,Outline=,BorderStyle=,Shadow=,Bold=0,Italic=0,Underline=0,StrikeOut=0,:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

or if you only have some values then

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000,Bold=0,Italic=0,Underline=0,StrikeOut=0,:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

Oh, good buddy, I've encountered a new problem. I can't set the font color. How can I solve this

[DeanVanGreunen]

@syjf set PrimaryColour to be a hex color that starts with &H so black would be &H000000 and white would be &HFFFFFF

[DeanVanGreunen]

@syjf do this instead, just set the primary and outline colors, also remove any style that isn't set and also remove any trailing commas.

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

[syjf]

相反，只需设置原色和轮廓色，同时删除任何未设置的样式，并删除任何尾随逗号。

let result = ffmpeg()
.addInput("./input.mp4")
.addOptions([
    `-vf subtitles=my_subtitles.srt:force_style=FontName=Arial,FontSize=24,PrimaryColour=&HFFFFFF,OutlineColour=&H000000:fontsdir=/fonts`,
])
..addOutput("./output.mp4");

Hey, buddy, I've encountered a problem again. Do you know the reason for this? Is there a problem with the sentences I wrote