Closed AdrianMrn closed 2 years ago
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);
}
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.
Sound good 👍 let me know if you need me to try anything out.
@AdrianMrn child track elements should be working now. Give it a shot if you can.
@heff Thanks! This works great in combination with mux-chrome 👍
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:
It looks like maybe
custom-video-element
should allow appending children to the nativevideo
element here: https://github.com/muxinc/custom-video-element/blob/8723e13a7622c23bb277b518afd300ddae3dbde2/index.js#L43Maybe something like this in custom-video-element?