Simplify VTT management (improved version)

[remibetin]

TL:DR

• A YAML file lists all the VTTs' types and languages available for each video, along with other useful metadata.
• In a resource containing a video, we use a different video-player include, to automatically pull the available VTTs, and associate them with the video player.
• When a translator translates a VTT file, they only need to edit the YAML file. Every page hosting the video is then automatically updated to provide the new subtitles/descriptions.
• When a user visits the resource, VTT files in the language of the page are selected by default. They can still select any other available language in the video player.
• "All WAI Translations" page use the metadata info to automatically list all video translations.

Detailed description:

1. All VTT files are stored in wai-website-data repository, in wai-videos folder. Inside this folder, VTT files can be organized in subfolders.

Directory structure illustration:

.
├── wai-videos
│   ├── perspective-videos
│   │   ├── en
│   │   │   ├── keyboard.en.vtt
│   │   │   └── captions.en.vtt
│   │   └── fr
│   │       ├── keyboard.fr.vtt
│   │       └── captions.fr.vtt
│   └── video-introduction
│       ├── video-introduction.en.vtt
│       ├── video-introduction.fr.vtt
│       ├── video-introduction.de.vtt
│       └── video-introduction.zh-hans.vtt
└── ...

3. A new video-metadata.yml file is created in wai-website-data repository.

Example: extract related to Keyboard Compatibility perspective video :

- id: keyboard # Unique identifier of the video. Used to identify VTT files for this video, based on the beginning of their basename. Example: keyboard.en.vtt, keyboard_ad_desc.en.vtt, etc.
  name: # Used in "All WAI Translations".
    en: "Web Accessibility Perspectives: Keyboard Compatibility"
    fr: "L'accessibilité Web illustrée : Compatibilité avec le clavier"
  main-page: /perspective-videos/keyboard/ # Ref of the main page hosting this video. Used in "All WAI Translations". 
  path: perspective-videos # From wai-videos folder, path to the VTT files for this video
  lang-folder: true #[Optional] When set to `true`, means VTT files for a language are located in a subfolder named after the language shortcode. Example: `perspective-videos/en` rather than directly in `perspective-videos/`
  captions: # Type of functionality available for this video
    - en #captions' language
  captions-ad:
    - en
  subtitles:
    - fr #languages of the available translations/VTT files.
    - zh-hans
  subtitles-ad:
    - fr
    - zh-hans
  descriptions-ad:
    - en
    - fr
    - zh-hans

When a VTT file is translated in a new language, the translator adds the language shortcode to the list of languages available for the relevant functionality (subtitles, subtitles for the audio-description version, descriptions for the audio-description version, etc.)

4. In the page hosting the video, a different video player include is used (video-player-data.html instead of video-player.html), with the following new attribute:

• [required] video-id: unique identifier used in video-metadata & VTT files basenames for this video.

Example:

{% include video-player-data.html
    video-id="keyboard"
    yt-id="7RHG_XiQ0ck"
    yt-id-ad="21yWr7evHTs"
%}

Opened PRs:

• Update video player includes: https://github.com/w3c/wai-website-theme/pull/67
• Create video-metadata.yml & host all captions/subtitles in wai-website-data: https://github.com/w3c/wai-website-data/pull/113

[shawna-slh]

@iadawn OK with you? I've added to our discuss list...