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>```