HLS Video Player - MUX on Retool

💬 Queries and Resources
1

I've seen a few posts asking for help, but no one's ever been able to answer how to make an HLS video player in Retool. For example, Mux is the leading video provider for startups and they require HLS playback.

How can I create a JS component to play back the video from Mux? Here are their docs:

and code sample from Mux

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video
  id="my-player"
  controls
  style="width: 100%; max-width: 500px;"
/>

<script>
  const video = document.querySelector('#my-player');
  const src = 'https://stream.mux.com/{PLAYBACK_ID}.m3u8';
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Some browsers (safari and ie edge) support HLS natively
    video.src = src;
  } else if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
  } else {
    console.error("This is a legacy browser that doesn't support MSE");
  }
</script>```
2

@mattlovesretool
Welcome to the forum!

should be added to the the app's library you are building or at the overall Retool platform level
https://docs.retool.com/docs/custom-js-code#custom-javascript-libraries--npm-modules
The rest could possibly be added to a custom component?
Just a suggestion....I don't have experience with MUX

3

Hi Matt,

Were you able to add the MUX video player on retool?

thx!