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