Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rick Gates
11,061 PointsHow do I add multiple tracks for subtitles in different languages?
Perhaps I want to have subtitles available in multiple languages, for example: English and Spanish. How do I make these subtitle tracks available for the User to select their preferred subtitle track?
2 Answers
Rick Gates
11,061 PointsThis appears to be resolved once mediaelements.js is added in the subsequent Custom Media Players section.
Samuel Custer
2,683 PointsUsing the track element you can specify the language with the "srclang" (Source Language) attribute.
Example of a video with English, German, and Spanish subtitles:
<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="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
<track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>
Rick Gates
11,061 PointsI previously tried adding the multiple tracks just as you described, but I didn't see how the User is able to switch between them in the video player.
I see now that the this appears to be resolved once mediaelements.js is added in the subsequent Custom Media Players section.
Thanks for the quick reply though.
Rick