Support multiple language tracks for captions

[augbog]

It would be nice to be able to support multiple language tracks so that users who want to see captions in different languages (assuming they are available) will have the option to.

<video id="video" controls preload="metadata">
   <source src="video/sintel-short.mp4" type="video/mp4">
   <source src="video/sintel-short.webm" type="video/webm">
   <track label="English" kind="captions" srclang="en" src="captions/vtt/sintel-en.vtt" default>
   <track label="Deutsch" kind="captions" srclang="de" src="captions/vtt/sintel-de.vtt">
   <track label="Español" kind="captions" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>

Ideally there should also be some sort of intuitive UI so users can select the language they want. Perhaps a gear icon that shows a list of all the available language tracks and then dynamically changes the caption language.

There's a good guide on MDN on how to support this here

I might look into this when I can.

[shanepoints]

Looks like this is still a hot item? Outside of IOS (which handles multiple text tracks by way of native video player) it seems like the experience is pretty clunky if you try to add more than one text track... they will try to compete with each other, displaying a bit of each track that is attached. The article that @augbog referenced above describes a small popup menu to select the track you want to use.

Additionally, subtitles SHOULD use the kind="subtitles" attribute which, in addition to kind="descriptions", are currently being ignored.

If it's welcome, I'd be happy to put together a PR with a solution for multiple tracks that would solve for these things.

[hozefaj]

@shanepoints Sure happy to accept a PR supporting multiple tracks.

[shanepoints]

Opened a PR for this. It's working pretty well, and I've QA'ed on Chrome, Firefox, IE11. Happy to make more changes if necessary.

[shanepoints]

Here's the prototype I was working with: https://video-refactor-cdcchusgbg.now.sh/video-with-playlist

It uses vtt files in two different formats. Not sure if there are more ways to format?