Looking for an example of video with CC tracks enabled

Flow
1

I have a simple video class that creates and plays mp4s great in the browser, but need to modify it to allow CC tracks to be displayed. Here is the class I have now:

@Tag("video")
public class Video extends HtmlContainer implements ClickNotifier<com.vaadin.flow.component.html.Image> {

    private static final PropertyDescriptor<String, String> srcDescriptor = PropertyDescriptors
            .attributeWithDefault("src", "");

    public Video() {
        super();
        getElement().setProperty("controls", true);
    }

    public Video(String src) {
        setSrc(src);
        getElement().setProperty("controls", true);
    }

    public String getSrc() {
        return get(srcDescriptor);
    }

    public void setSrc(String src) {
        set(srcDescriptor, src); 
    }

}

The code above creates html like this:

<video src="https://example.amazonaws.com/videos/example.mp4" controls="" style="width: 800px; height: 500px;">

Here is an example what I ultimately need to see in the HTML

<video  width="320" height="240">  
 
     <source type="video/mp4" src="/my_video_file.mp4" >   
     <track src="/captions_file.vtt" label="English" kind="captions" srclang="en-us" default >
     <track src="/French_captions_file.vtt" label="French" kind="subtitles" srclang="fr" >

</video>

Can anyone point me in the right direction for this? Thanks

2

You can do something like:

Element track = new Element("track");
track.setAttribute("src", "...");
getElement().addChild(track);