通过 websocket 发送 div 部分时，hls 流不工作

Question

嘿，我正在尝试让 Hls 流在我正在使用 Node.js、javascript、HTML 构建的站点/应用程序上工作......

我在这里使用这个确切的代码 sn-p -

<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 部分刚刚用来自开始，而不是通过 websocket 发送 div 部分，然后在浏览器页面加载后附加它，然后它就可以完美地工作了..

即使页面的 HTML 代码从检查中看起来完全一样，当包含上面第一个代码的 div 部分在从 websocket 消息接收后附加到 Html 页面时，Hls 应用程序/流视频不起作用。

在浏览器最初访问该站点后，Hls 会不会被激活，因为它被添加到 Html 文档中？我是否需要进行某种重绘/刷新才能加载？

我知道 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 代码放入测试 HTML 文件并像这样加载它时会发生这种情况，但是当 Hls 视频对象/脚本部分添加到通过 websocket 发送并在客户端请求页面后附加到页面的 div 部分时，该 src="blob: ..." 部分不会自动添加到 HTML 中，这让我认为由于某种原因在客户端请求页面后附加到页面时 Hls 没有加载..

在添加 div 部分后，我可以通过什么方式刷新页面以使其正常工作或强制它加载应用程序？

有点卡在这里所以非常感谢任何帮助。

Answer 1

这实际上与 WebSockets 和 HLS 本身没有任何关系。这里的问题是您正在动态添加一个不会被您正在使用的 HLS 播放器自动增强的元素。

未经测试，但文档中有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 !");
  });