Add subtitles to embedded videos?

[salbeira]

One of our users wants to embedd a pre-produced video they created into their slides and add subtitles to them.

I can not seem to find any test including videos that tries that.

We managed to simply embedd the video by a manual html tag:

<video controls style="width: var(--slide-width); height: var(--slide-height);">
    <source src="/videos/myvideo.mp4" type="video/mp4" />
    <track kind="subtitles" label="Deutsch" srclang="de" src="/videos/mycaptions.vtt" default />
</video>

This resulted in having the video with subtitles embedded but the subtitles were very large and centered on the screen with changes to the line-attribute within the vtt file not really helping us out to move the subtitles back to the bottom. EDIT: This seems to be an issue with how Chrome handles subtitles on Windows - especially Windows 11 where it simply chooses the system's default subtitle style which is "large, in the center of the video" instead of "readable at the bottom of the video".

We would need a way to specify subtitles on markdown video-links somehow. As a "proper" track definition involves all the information provided above ... maybe we can specify this in a JSON style? If this can be a feature a user would have to be able to add multiple different tracks to the video.

![Caption](/videos/myvideo.mp4) {track=[{kind: "subtitles", label: "Deutsch", srclang: "de", src: "/videos/mycaptions.vtt"}]}

In addition we would need to style and position subtitles inside the video with css and possibly js (as the properties for cues in css are limited and do not include a way to position them while the vtt file and js can specify the "line" a text appears on, allowing positioning via setting the line attribute of each cue). This might involve a bit more testing than on first glance if we want to allow that. See:

mdn web docs about styling subtitles

This part of the issue may also simply be solved by resetting some text and styling inside video tags as it can also be caused simply by font-size and text-align changing css attributes of parent elements.

[monofon]

Why not use template macros for this?

See template-deck.html.

All those fancy settings are probably the same for all videos in a deck, so this might work well.

If not, just define a template macro for each kind of video.

[monofon]

There seems to be no further discussion needed, so I will close this for now.