Closed delucis closed 2 years ago
Now that we have the <Video>
component, the missing pieces are to track the captions addition/changes in the Translation Status Overview and add corresponding documentation about captions in the i18n guide. I am closing this in favor of #1058 and #1060.
Thanks for the issue! 🙌
Any video in docs with an audio track should include captions for people who can’t hear the audio. We currently have one example of this on the Tailwind integration page.
Considerations
We need to think about:
Suggested approach
Store caption files in
/public/captions/[lang]/[video-filename].vtt
Create a
<Video>
component that takes a videosrc
and looks up matching filenames in/public/captions/**/*.vtt
.It should create a
<track>
for each matching caption file.If it finds a caption file matching the current page’s language, that
<track>
should be marked with thedefault
attribute.If not, the
en
file (if present) should be marked asdefault
.label
attributes can be looked up fromsrc/i18n/languages.ts
.Example syntax:
In our integrations page generator instead of generating HTML markup for GitHub video URLs, we should use the
<Video>
component instead. That would allow us to keep those GitHub-hosted videos but caption them on the docs site.Reference
Captions can be loaded from WebVTT files in a
<track>
element inside a<video>
element.Here’s a
.vtt
captions transcription for our existing video: