How to access hlsConfig?

[alexhochreiter]

For local development reasons, i need to rewrite the URLs to the partfiles and playlists when hls.js is requesting them. The hls.js config uses thexhrSetup property for this, but i could not find a way to make my config known to the hls-video-element. I am using a pure ES6 & preact enviroment, running directly in the browser, so no webpack is involved - just to clarify the situation.

This is what I've tried so far:

<hls-video
  controls
  src="/media/somewhere/masterplaylist.m3u8"
  config="{ \"xhrSetup\": function (xhr, url) {.....} }"
  hlsConfig="{ \"xhrSetup\": function (xhr, url) {.....} }"
</hls-video>

Yet hls.js seems to not receive the config data from the attribute, so my question is: How can i make the hls -config object known to the element?

Version used: https://unpkg.com/hls-video-element@0 Example config im using:

{
  xhrSetup: function (xhr, url) {
    if (url.indexOf('https://my-project.com/') !== -1) {
       url = url.replace(
         'https://my-project.com/',
         'http://127.0.0.1:8000/'
        )
     }
     xhr.open('GET', url)
     throw new Error('this never gets thrown - this code is never reached anyways')
   }
}

[heff]

Thanks for the details. We haven't really exposed the HLS internal config yet in this project, but @mmcc is thinking through an idea.

Your use case probably needs to set a javascript property rather than an HTML attribute, to avoid passing functions as strings. So it'll probably look like:

const hlsVideoElement = document.createElement('hls-video-element');

hlsVideoElement.someProperty = yourConfig;

document.body.appendChild(hlsVideoElement);
// Or wherever you want the element to live

Stay tuned.

[mmcc]

Yeah, I'd love some feedback here on how you'd like this to work, but I think it makes sense to expose this. As Steve said, an attribute is probably not a great fit due to needing to be a string, so my two thoughts are:

• We expose a config property you can set in a similar way to how Steve is suggesting
• We provide a way for you to pass in your own Hls.js instance altogether.

Any thoughts?

[alexhochreiter]

Thank you guys for your quick responses and interest in the matter! I think both approaches have their advantages. With the "everything stringified into the attribute" approach, it seems like one possible approach to use it with frameworks like preact and htm:

const MyVideoComponent = props => {
  const myHlsConfig = {...}
  return html`
      <hls-video
        controls
        src=${`/media/${props.mediaId}/hlsMasterPlaylist`}
        hlsConfig=${myHlsConfig}>
      </hls-video>
    `
}

IFAIK htm isn't stringifying function/object props during live jsx parsing, so when taking usage in a normal html5 enviroment/website without a framework into account, stringifying might be a easy way for small and simple hlsConfigs to suite both cases somehow, but will hit its limits very quickly. Hence, even if it looks and feels easy to use, it will lead to more frustration for the devs using it, because of those limitations - i guess.

@heff's approach to create it with js directly is fairly the most universal and straight forward approach in my opinion. It keeps the origin of this Web Component pure to its initial intent, without any hacks to support third party interfaces like jsx props. Frameworks like preact can use that approach by working with element refs, which might seem like a dirty hack at first, but is a valid approach for wrapping and interfacing with this Web Component in my opinion.

To conclude my thoughts about this:

• Steves approach sounds like the best approach for this situation
• It would be very handy to pass just the hls.js config or a custom hls.js instance, with the instance taking precedence over a passed config

btw before you might ask why i keep making references to preact and htm, its because i moved away from react and webpack and needed a replacement for react-hls-player. Now I am basically wrapping a hls-video-element element in a preact component. Thank you guys for your time!

[Nodalailama]

Hi,

Is there any plan to allow parameter to be set in the hls-video element ?

Cordialement,

[heff]

Made a PR for this if someone wants to give it a quick check. #9