Support tracks (subtitles, thumbnails) as children of the element

[AdrianMrn]

Hey! We're using this library and media-chrome, I'd like to add a thumbnail track in combination with support for m3u8 files that I pull from Mux, so basically this:

https://github.com/muxinc/media-chrome/blob/4c4ef8a03aaef406d6ebfd14f8f737d7a523552b/examples/control-elements/media-clip-selector.html#L18-L24

but with the hls-video element. I've tried extending/copying the hls-video web component, but I haven't figured out how to place the track into the actual

I was hoping this would work:

<hls-video-custom slot="media" src={videoSrc}>
  <track
    slot="media"
    label="thumbnails"
    default
    kind="metadata"
    src={`https://image.mux.com/${playbackId}/storyboard.vtt`}
  ></track>
</hls-video-custom>

It looks like maybe custom-video-element should allow appending children to the native video element here: https://github.com/muxinc/custom-video-element/blob/8723e13a7622c23bb277b518afd300ddae3dbde2/index.js#L43

Maybe something like this in custom-video-element?

if (template.nativeChild) {
  nativeEl.appendChild(template.nativeChild);
}

[AdrianMrn]

Managed to add it like this:

get thumbnailsSrc() {
    return this.getAttribute('thumbnailsSrc');
}

set thumbnailsSrc(val) {
    if (val !== this.thumbnailsSrc) {
        this.setAttribute('thumbnailsSrc', val);
    }
}

Then in if (Hls.isSupported):

if (this.thumbnailsSrc) {
    const thumbnailTrack = document.createElement('track');
    thumbnailTrack.setAttribute('label', 'thumbnails');
    thumbnailTrack.setAttribute('default', 'true');
    thumbnailTrack.setAttribute('kind', 'metadata');
    thumbnailTrack.setAttribute('src', this.thumbnailsSrc);

    this.nativeEl.appendChild(thumbnailTrack);
}

[heff]

Glad you were able to figure it out!

I think we should be supporting it as a child track if possible in custom-video-element. Not sure how that's going to work with custom element slots, but it's worth figuring out.

Going to re-open and rename this.

[AdrianMrn]

Sound good 👍 let me know if you need me to try anything out.

[heff]

@AdrianMrn child track elements should be working now. Give it a shot if you can.

[AdrianMrn]

@heff Thanks! This works great in combination with mux-chrome 👍