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