How to add subtitles from a external source in HTML5?

Question

I'm trying to add subtitles from an external source in a video html but I can't. I'm using the WebTorrent Technology, so, I'm streaming video torrents in my Browser and the <track> tag not works for me. Here's the code that I use: https://plnkr.co/edit/31RZSBETaAQgnCgZgKUt?p=preview
The code for subtitles it's this:

file.appendTo('body');
var video = document.querySelector("video");
var track = video.addTextTrack("subtitles", "prompt", "en");
track.mode = "showing";
});

Thanks, i hope that you can help me!

Function shows as not supported in any browser haven't seen this one so can't really speak to it: https://www.w3schools.com/tags/av_met_addtexttrack.asp — shaunhusain, Jan 11 '18 at 06:46
Oh no, it´s not a issue with the code at linked plnkr. It's just that I want to add subtitles from an external source, and I don't know how to do it — NuzzeSicK, Jan 11 '18 at 06:59
Can you describe "doesn't works"? Have you created and linked to a corresponding `.vtt` file? — guest271314, Jan 11 '18 at 06:59
@shaunhusain `.addTextTrack()` is supported at both Chromium/Chrome and Firefox. — guest271314, Jan 11 '18 at 07:47
@guest271314 gotcha I wouldn't normally trust w3schools.com really but don't seem to see anything about it on MDN, where else should I be looking? — shaunhusain, Jan 11 '18 at 07:52
@shaunhusain See [`HTMLMediaElement`](https://html.spec.whatwg.org/#htmlmediaelement). You can use `"addTextTrack" in HTMLMediaElement.prototype` to check if `addTextTrack` is defined at the browser you are using, see also this [answer](https://stackoverflow.com/a/39563620/) at [Alternative for checking browser idle](https://stackoverflow.com/q/39553729/) — guest271314, Jan 11 '18 at 08:02

score 1 · Answer 1 · answered Jan 11 '18 at 07:19

You can create or include a <track> element within HTML as a child of parent <video> element with default property set to true, src to to .vtt file, kind set to "subtitles", mode set to "showing", label set to "Español", and srclang set to "es"

  file.appendTo('body');
  var video = document.querySelector("video");

  var track = document.createElement("track");
  track.mode = "showing";
  track.label = "Español";
  track.kind = "subtitles";
  track.srclang = "es";
  track.src = "subs.vtt";
  track.default = true;
  video.appendChild(track);

plnkr https://plnkr.co/edit/9MpJNHTB08RP6Lz3tvEb?p=preview

How to add subtitles from a external source in HTML5?

1 Answers1

Linked