-vf subtitles=example.srt not work

[kkxlkkxllb]

how can i insert .srt format subtitle into mp4 video ?

ffmpeg.run('-i', 'output.mp4', '-vf', 'subtitles=xxx.srt', this.output)

not work

should compile ffmpeg.wasm with --enable-filter=subtitles ?

[loe-lobo]

Hi @kkxlkkxllb .
I had the same need and ended up forking the repo and adding the required libraries and configuration to enable embedding subtitles. I'm not sure if all the changes I did are required, but it's working as it is.

You can checkout it and execute the ./build-with-docker.sh
https://github.com/loe-lobo/ffmpeg.wasm-core

[kkxlkkxllb]

Thanks @loe-lobo
But i run bash build-with-docker.sh failed, i got error message

-- Installing: /src/build/share/pkgconfig/zlib.pc
make: make install
EMSDK=/emsdk
OPTIM_FLAGS=-O3 --closure 1
BUILD_DIR=/src/build
CONF_FLAGS=--prefix=/src/build --host=i686-gnu --enable-static --disable-cli --disable-asm --extra-cflags=-c -s USE_PTHREADS=1 -O3 --closure 1
configure: ./configure --prefix=/src/build --host=i686-gnu --enable-static --disable-cli --disable-asm --extra-cflags=-c -s USE_PTHREADS=1 -O3 --closure 1
Traceback (most recent call last):
  File "/emsdk/upstream/emscripten/emconfigure.py", line 52, in <module>
    sys.exit(run())
  File "/emsdk/upstream/emscripten/emconfigure.py", line 45, in run
    building.configure(sys.argv[1:])
  File "/emsdk/upstream/emscripten/tools/building.py", line 339, in configure
    run_process(args, stdout=stdout, stderr=stderr, env=env, **kwargs)
  File "/emsdk/upstream/emscripten/tools/shared.py", line 205, in run_process
    ret = subprocess.run(cmd, check=check, input=input, *args, **kw)
  File "/usr/lib/python3.7/subprocess.py", line 472, in run
    with Popen(*popenargs, **kwargs) as process:
  File "/usr/lib/python3.7/subprocess.py", line 775, in __init__
    restore_signals, start_new_session)
  File "/usr/lib/python3.7/subprocess.py", line 1522, in _execute_child
    raise child_exception_type(errno_num, err_msg, err_filename)
FileNotFoundError: [Errno 2] No such file or directory: './configure': './configure'

[loe-lobo]

HI @kkxlkkxllb .
I think you might have missed one step to initialize the submodules, I'm sorry that I didn't make it explicitly before.

You will need to clone the project, initialize the submodules, and then run the build-with-docker.sh.

git clone https://github.com/loe-lobo/ffmpeg.wasm-core.git
cd ffmpeg.wasm-core
git submodule update --init --recursive
bash ./build-with-docker.sh

[kkxlkkxllb]

Thanks @loe-lobo , i have run git submodule update --init --recursive but i found some folder in third_party is empty, maybe clone failed. i removed the empty folder and run git submodule update --init --recursive again, Then it was compiled successfully

[loe-lobo]

Hi @kkxlkkxllb .
I’m glad It compiled nicely. I have one more tip for you. You will need to upload the font file you want to use on your subtitles and then specify it on your command. I'm away from the computer, but as soon as possible, I'll share some code to show how I'm doing.

Here is the example code:

ffmpeg.FS('writeFile', 'output.mp4', YourVideoFile);
ffmpeg.FS('writeFile', 'xxx.srt', YourSubtitleFile);
ffmpeg.FS('writeFile', `tmp/arial`, Arial.ttf); 

ffmepg.run('-i', 'output.mp4', '-vf', 'subtitles=xxx.srt:fontsdir=/tmp:force_style="Fontname=Arial"', this.output);

[loe-lobo]

@jeromewu can we have the changes on https://github.com/loe-lobo/ffmpeg.wasm-core merged into the source? If so, what is the process?

Thanks.

[jeromewu]

@loe-lobo can you create a PR to https://github.com/ffmpegwasm/ffmpeg.wasm-core? So that I can merge it and publish a new version of ffmpeg.wasm-core.

BTW, I checked your commits already and I think they are amazing 😄

[loe-lobo]

@loe-lobo can you create a PR to https://github.com/ffmpegwasm/ffmpeg.wasm-core? So that I can merge it and publish a new version of ffmpeg.wasm-core.

BTW, I checked your commits already and I think they are amazing 😄

Thanks @jeromewu, I just create the PR ffmpegwasm/ffmpeg.wasm-core#5

[jeromewu]

Thanks @loe-lobo , the PR has been merged and this feature is included in release v0.9.8. 😄

[jeromewu]

Close this issue issue as it is fixed.

[christech1117]

@loe-lobo @jeromewu

Excuse me, may I ask if I want to merge subtitles and videos, but after the mp4 is produced, no subtitles that I want to embed are displayed. I suspect that I have not read any .ttf, so I want to write .ttf file into memory and get it.

The log shows like a picture, I think it is the reason why fetchFile did not get the Arial.ttf file ffmpeg.FS("writeFile", "tmp/arial", await fetchFile("Arial.ttf"));.

Is there a good solution?
Thank you very much

[loe-lobo]

@loe-lobo @jeromewu

Excuse me, may I ask if I want to merge subtitles and videos, but after the mp4 is produced, no subtitles that I want to embed are displayed. I suspect that I have not read any .ttf, so I want to write .ttf file into memory and get it.

The log shows like a picture, I think it is the reason why fetchFile did not get the Arial.ttf file ffmpeg.FS("writeFile", "tmp/arial", await fetchFile("Arial.ttf"));.

Is there a good solution?
Thank you very much

Hi @christech1117.

To be able to use the Arial as font to embed the subtitles you need to have the font file (Arial.ttf) available on wasm environment. Basically you need to upload the font the same way you are uploading the video.

I believe the only thing you're missing is the Arial.ttf file asset, the GET request that tries to load the file is failing with 404. You need to have the file available to be fetched. Make sure you have the Arial.ttf file on your server to be fetched (or you can download it from another URL)

Cheers.

[allilevine]

To be able to use the Arial as font to embed the subtitles you need to have the font file (Arial.ttf) available on wasm environment. Basically you need to upload the font the same way you are uploading the video.

@loe-lobo Thanks for enabling this, it's working great. I haven't been able to use a font that's not Arial, though. For example, I'd like to use a Google Font like Abel:

ffmpeg.FS(
			'writeFile',
			'tmp/abel-v12-latin-regular',
			await fetchFile( '/path/to/abel-v12-latin-regular.ttf' )
		);
...
'subtitles=captions.vtt:fontsdir=/tmp:force_style="Fontname=abel-v12-latin-regular"', 

But I get this error:
[fferr] [Parsed_subtitles_0 @ 0x1cb3600] fontselect: failed to find any fallback for font: (Arial, 400, 0)

Is there an issue with how I'm loading and naming the font?