通过WebSocket发送div部分时HL流无法正常工作

Question

嘿，我试图让Hls流在使用Node.js，javascript，HTML构建的网站/应用程序上工作。

我在这里使用这个确切的代码片段-

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

当我正常地将其加载到粘贴在HTML页面中时，该方法非常有用。

但是，在我的页面上，我有一个HTML页面，其中加载了空白的正文部分，但以下几行除外-

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

会创建一个websocket连接，并从服务器接收包含div部分的消息，然后将其附加到正文的末尾。

发生这种情况时，hls应用程序将不会加载，并且没有可用的流式视频，但是，如果我加载的HTML网页具有完全相同的测试HTML页面，而div部分从一开始就已经写在HTML代码中，通过网络套接字发送div部分，然后在加载浏览器页面后附加它，那么它可以完美地工作。

即使页面的HTML代码从检查中看起来完全相同，但是当从Websocket消息接收到包含上面第一个代码的div部分后，将Hls应用程序/流视频不起作用时。

浏览器最初访问网站后，由于正在将其添加到HTML文档中而导致Hls无法激活吗？ 我需要做某种重绘/刷新才能加载它吗？

我知道Hls由于某种原因没有重新加载，因为当Hls工作并且您检查Html时，它会在加载Hls的视频标签下向网站的HTML添加一些内容，它会添加一个以前没有的src，例如

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

变

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

当我将Hls代码放在Test HTML文件中并像这样加载时会发生这种情况，但是当Hls视频对象/脚本部分添加到通过websocket发送的div部分并在客户端请求页面后附加到页面时，即src = “ blob：...”部分不会自动添加到HTML，由于某些原因，我认为在客户端请求页面后将Hls附加到页面时，HLS不会加载。

添加div部分后，有什么方法可以刷新页面以使其正常工作或强制其加载应用程序？

卡在这里，因此不胜感激。

Answer 1

这实际上与WebSockets无关，也与HLS本身无关。 这里的问题是您正在动态添加一个元素，该元素不会被您使用的HLS播放器自动增强。

未经测试，但是文档中有一个示例可以显式增强播放器 ：

  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 !");
  });