0

I recently created html files with video and webvtt subtitles.

Everything is fine, but when I watch the video on mobile, the position of the subtitles is too low.

After searching I found that to fix this I had to add line:XX% to each line of the vtt file.

00:00:00.000 --> 00:00:03.700 line: 90%
some subtiltles

The problem is that I have to edit 500+ vtt files of 300+ lines one by one.

And vtt files will be added in the future.

I found that css couldn't solve this, so I searched and tried to solve it through javascript, but it didn't work.

TextTrack.cues.line = number

Is it possible to solve this via javascript?

JS KIM
  • 695
  • 1
  • 5
  • 12
  • Adding `line:XX%` to each line seems to need `for` loops for each eddited file. – jacobkim Jul 16 '21 at 07:15
  • Seems to change each cue's style by CSS or JS would work. It seems [this](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#styling_the_displayed_subtitles) works? – jacobkim Jul 16 '21 at 07:16
  • 1
    You could fetch the WebVTT file, edit it and use the edited version (see [this answer of mine](https://stackoverflow.com/questions/42916629/html5-video-add-subtitle-text-from-a-textarea/42918584#42918584) for a similar situation which could help), but in your case it's probably better you have an offline script that runs over all your files and add these directly to the files you serve. Maybe your preferred text editor has some "macro" tools where you could write that simple script, WebVTT format is quite strict and thus quite easy to parse. – Kaiido Jul 16 '21 at 08:01
  • @jacobkim Unfortunately the link you gave is what I already found and it didn't work. Thanks for the help. But I don't know how to apply for loop to vtt file. – JS KIM Jul 22 '21 at 02:09
  • @Kaiido Thanks for your help. What I wanted was to modify one js file and apply it to the whole. But I couldn't find another way, so I modified all the files at once using the editor's function as you suggested. – JS KIM Jul 22 '21 at 02:10
  • Duplicate of https://stackoverflow.com/questions/64505385/html5-video-subtitles-positioning which has an answer for it. – LWC Jun 29 '22 at 20:07

0 Answers0