Add system to provide captions for videos

[delucis]

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:

• Translating captions so they are available in multiple languages
• Handling video from GitHub (like the Tailwind example) as well as video files stored in the docs repo

Suggested approach

1. Store caption files in /public/captions/[lang]/[video-filename].vtt

2. Create a <Video> component that takes a video src 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 the default attribute.

   • If not, the en file (if present) should be marked as default.

   • label attributes can be looked up from src/i18n/languages.ts.

   Example syntax:

   <video controls>
      <source src="video-filename.mp4" type="video/mp4">
      <track label="English" kind="subtitles" srclang="en" src="/captions/en/video-filename.vtt" default>
      <track label="Deutsch" kind="subtitles" srclang="de" src="/captions/de/video-filename.vtt">
   </video>

3. 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:

WEBVTT

00:00.570 --> 00:06.520
Hey everyone, I’m Dan, and today I’m going to show you how to use Tailwind CSS with your Astro project.

00:06.815 --> 00:12.415
You can see I’ve got a basic Astro site here and it looks pretty boring, so I want to add some styles to it.

00:12.500 --> 00:15.500
I’ll click this button to open up a new terminal

00:15.511 --> 00:19.871
where I can run the command “npx astro add tailwind”.

00:20.107 --> 00:25.500
This command can be found in the integration docs which I will be sure to link.

00:26.327 --> 00:34.383
It prompts me to permit it to modify the configuration file to support Tailwind and go ahead and hit yes to that

00:34.563 --> 00:38.673
and now it wants to install Tailwind itself and I’ll definitely hit yes to that.

00:39.017 --> 00:44.760
Once that’s done it wants to generate a Tailwind configuration file automatically so I’ll hit yes

00:45.076 --> 00:49.365
and all I have to do now is restart the dev server

00:49.447 --> 00:55.857
and we can see I’ve got some great styles already written out in Tailwind in one of my components.

00:56.069 --> 01:02.075
Let me just make the header bold, using Tailwind.

01:02.236 --> 01:04.927
And there we have it: Tailwind in Astro!

[yanthomasdev]

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! 🙌