htmlvideoseovideo-subtitles

How to properly publish an html5 video with subtitles [seo]

How I must publish a video subtitled in two languages (or n)?

  1. All in one publication (one url) All text coming with this publication is in English.
<video src="a.mp4">
<track srclang='en' src="a.en.vtt" default>
<track srclang='es' src="a.es.vtt">
</video>
  1. Make two publications (two different url)

a) All text coming with this publication is in English.

<video src="a.mp4">
<track srclang='en' src="a.en.vtt">
</video>

b) All text coming with this publication is in Spanish.

<video src="a.mp4">
<track srclang='es' src="a.es.vtt">
</video>

"Publication in English but video subtitles available in more languages" or "A publication per language and video subtitled in that language"?

To be more specific, the video is a user content publication. Users publish the video in his language (maybe could be suggested to publish in other languages...) and has the option to upload subtitles in different languages. How I have to manage this? Which case is better?

User can add some subtitles in different languages to his video (case 1)

or

User can only publish subtitles in his language. And for other languages must change language, and make another publication with another subtitles (case 2)

Solution

  • According to the MDN Docs:

    A media element cannot have more than one track with the same kind, srclang, and label.

    (they also have a comprehensive example here)

    This means that option 1) is fine. It's also semantically the best option if you only have one video with more than one subtitle track for it.

    For managing user-uploaded subtitles, there can still be only one of each language, without changing anything else. The user should be able to specify the language of the subtitles they are providing (don't assume their language is their only language) and if it already exists, then it would have to be overwritten. Depending on how far you want to develop this feature, they might be able to edit existing subtitles instead or be able to compare to what is already there before overwriting.