Hls streaming not working when sending div section through websocket

Question

Hey I am trying to get Hls streaming to work on a site/application I am building using Node.js, javascript, HTML...

I am using this exact code snippet here -

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
    if(Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
      });
   }
</script>

which works great when I just load it up pasted in a HTML page normally..

however, on my page, I have an HTML page that loads with a blank body section, except for these few lines -

<script type='text/javascript' src="/inc/js/veud/createServerWsConnection.js"></script>
<script src="inc/js/veud/registerWsHandlers.js"></script>
<script>
    var ws = createWebSocket();
    registerHandlers(ws);
</script>
<script src ="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

which create a websocket connection, and receives a message from the server containing the div section, which is then appended to the end of the body.

When this happens, the hls application does not load, and no streaming video is available, however, if I load up a test HTML page with the exact same HTML, with the div section just already written in the HTML code from the beginning, instead of sending the div section through a websocket and then appending it after the browser page has loaded, then it works perfectly..

even though the HTML code of the page looks the exact same from inspection, the Hls application/ streaming video is not working when the div section containing the first code above is appended to the Html page after receiving from a websocket message..

could Hls not be activating because it is being added to the Html document after the browser has accessed the site initially? do I need to do some sort of redraw/refresh to get it to load?

I know the Hls is not reloading for some reason, because when Hls works and you inspect the Html, it adds something to the HTML of the site under the video tab where the Hls is loaded it adds a src that wasnt there before so something like

<video id="video"></video>

becomes

<video id="video" src="blob:http://172.30.204.207/1d2771a3-f86d-42ed-bec7-794b4a4a4770"></video>

this happens when I put the Hls code in a Test HTML file and load it like that, but when the Hls video object / script section is added to div section that is sent through websocket and appended to page after client requests page, that src="blob: ..." section is not automatically added to the HTML, making me think for some reason the Hls is not loading when appended to page after the client requests the page..

any way I can refresh the page to make it work or force it to load the application after the div section is added?

kind of stuck here so any help is greatly appreciated.

Answer 1

This doesn't really have anything to do with WebSockets, nor HLS itself. The issue here is that you're dynamically adding an element which won't be automatically enhanced by the HLS player you're using.

Untested, but the documentation has an example for enhancing the player explicitly :

  var video = document.getElementById('video');
  var hls = new Hls();
  // bind them together
  hls.attachMedia(video);
  // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
  });