How to create and embed a subtitle file

This tutorial shows how to create captions/subtitles files in WebVTT format for subtitling in videos and audios. You can provide subtitles in different languages for the same media if you like. Subtitle files are simple text files. The SRT format is often used as well but iOS devices can't read them (at this time of writing), so best stick to WebVTT. You can write in Notepad(Win), Notepad++ or SimpleText(Mac), BBedit.
Note: Don’t use a text editor that permits formatting (changing the appearance of text) because the files will contain hidden information that prevents the subtitles from appearing in your video/audio. It has to be in the UFT-8 format, which both text editors mentioned above provide.
For Mac users: although you can format text in SimpleText, don’t do it in this case!

Below you find an example:

WEBVTT

00:00:14.000 –> 00:00:20.500
Lost Corners consists of charcoal paintings
with pastel on paper and canvas. 00:00:21.000 –> 00:00:26.500
The series shows landmarks, places and objects
which we are so used to 00:00:26.600 –> 00:00:27.500
that we do not really see them anymore. 00:00:27.800 –> 00:00:31.250
We would only notice if they disappear.

The first two zeros is for the hour, the second set for minutes, the third set for seconds and finally you have miliseconds.
The first time code marks the beginning of a phrase, the second after the  -> indicates the time when the phrase disappears. Since you have miliseconds at your disposal it is possible to finetune this quite well.
Don't make the text to long. Divide it in short chunks like above and avoid three lines, in one go. Here is a detailed tutorial with useful advice: https://www.miracletutorials.com/how-to-create-captionssubtitles-for-video-and-audio-in-webtvv-srt-dfxp-format/,
When you are finished, you save the subtitle file as a .vtt file, using a special naming convention so that the subtitle menu displays properly in the Footprint Player:

For example: mysubtitle-English-en.vtt where English will be the label for the language in the menu and en is the language code. name, language label and language code are divided by a hyphen. Make sure that the name mysubtitle(in this example) does not have hyphen or space. I.e.: my-subtitle-English-en.vtt is wrong, the player will interpret that the language is title and English the language code.

Embedding subtitles

To add subtitles in a video (or audio) in the wizard or a module, you give the only the name of the subtitle, without the .vtt
If you want to use multiple laguage versions, just divide them with a comma like this:

mysubtitle-English-en,mysubtitle-Francais-fr,mysubtitle-Deutsch-de

Otherwise, just add one subtitle file. And here is a shortcode example with three language versions:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/presentation/index.m3u8|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|
captionslink=mysubtitle-English-en,mysubtitle-Francais-fr,mysubtitle-Deutsch-de{/footprint}

With the example above, the Player will presume that you placed the subtitles in the images folder of your Joomla installation. If you placed it in a subfolder, add that too, like this:

subfolder/mysubtitle-English-en

You can link from an external source too, but we noticed that subtitles residing on AWS do not show for some unfathomable reason, even after adding a crossdomain.xml file. so, best keep it on your own domain. You will need to use FTP to upload the files because Joomla views vtt as an unacceptable format, even if you add it in the accepted type field.

Trouble shooting

If a subtitle file doesn't show up, you either mistyped the name or there is an error in the file itself. A typical error is to make a mistake in the time code, like:

00:00:14.000 –> 00:00:20.500
Lost Corners consists of charcoal paintings
with pastel on paper and canvas. 00:00:18.000 –> 00:00:26.500
The series shows landmarks, places and objects
which we are so used to 00:00:26.600 –> 00:00:27.500
that we do not really see them anymore.

The timing in the second row is incorrect, since the first row ends at 20.500 seconds whereas the second row tries to start in a time (18 seconds from the start) that has already passed. It is not easy to discover errors like that in long files, so take special care not to make this sort of error.

Another error that may happen is that there is a newline where it shouldn't be, like:

00:00:14.000 –> 00:00:20.500
Lost Corners consists of charcoal paintings
with pastel on paper and canvas. 00:00:21.000 –> 00:00:26.500

The series shows landmarks, places and objects
which we are so used to 00:00:26.600 –> 00:00:27.500
that we do not really see them anymore. 00:00:27.800 –> 00:00:31.250
We would only notice if they disappear.

Sometimes, files have hidden characters. Try copy the entire content of the file and paste it in another editor. Save and try again.