Passing options to Video.js player doesn't work

[hugomendonca98]

Hello, I'm trying to pass some options available in Video.js to the player, but it doesn't seem to work. Specifically, I'm setting up the player options including HLS settings, but the player doesn't respond to them as expected. Is there any way to make this work?

<MediaThemeInstaplay
  className="video-js-container min-h-[200px] md:min-h-[480px]"
  style={{
    height: "100%",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignContent: "start",
    position: "relative",
  }}
>
  <VideojsVideo
    slot="media"
    src={options.sources[0].src}
    className="video-js-inner"
    playsInline
    style={{ width: "100%", height: "100%" }}
    fluid={true}
    responsive={true}
    autoPlay={options.autoplay}
    muted={options.muted}
    options={{
      fluid: true,
      responsive: true,
      playsinline: true,
      controls: true,
      sources: options.sources,
      hls: {
        limitRenditionByPlayerDimensions: true,
        useDevicePixelRatio: true,
      },
    }}
    hsl={{
      limitRenditionByPlayerDimensions: true,
      useDevicePixelRatio: true,
    }}
    crossOrigin
  />
</MediaThemeInstaplay>

[luwes]

Thanks for the feedback! Yes, this options or config passing is something that lacks in most custom media elements at the moment but we are thinking of adding this in the future.

[rssfrncs]

Hey. Any idea when configuring videojs or hlsjs elements will be possible?

[hugomendonca98]

Hey. Any idea when configuring videojs or hlsjs elements will be possible?

You can pass the hsl class directly into the videojs component:

<MediaThemeInstaplay
      className="video-js-container min-h-[200px] md:min-h-[400px] md:max-h-[400px]"
      style={{
        height: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignContent: "start",
        position: "relative",
      }}
    >
      <VideojsVideo
        slot="media"
        src={options.sources[0].src}
        className={cn("video-js-inner", {
          "vjs-fluid vjs_video_3-dimensions": width < 768,
          "min-h-[400px]": width >= 768,
        })}
        playsInline
        style={{ width: "100%", height: "100%" }}
        autoplay={options.autoplay}
        muted={options.muted}
      />
    </MediaThemeInstaplay>