HLS流式工作不

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代码中一开始，不是通过websocket发送div部分，然后在浏览器页面加载后追加它，然后它完美地工作。

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

可能H1在浏览器最初访问网站之后，它是否被添加到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视频对象/脚本部分被添加到div部分通过websocket发送并附加到页面在客户端请求页面之后，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 !"); 
    });