Hls le streaming ne fonctionne pas lors de l'envoi section div par websocket

Question

Hé, je suis en train de faire Hls la lecture en continu sur un site/application Je construis en utilisant Node.js, javascript, HTML ...

J'utilise ce extrait de code exact ici -

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

qui fonctionne très bien quand je charge juste vers le haut collé dans une page HTML normalement ..

mais

, sur ma page, j'ai une page HTML qui charge avec un corps blanc section, à l'exception de ces quelques lignes -

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

qui crée une connexion websocket, et reçoit un message du serveur contenant la section div, qui est ensuite ajouté à la fin du corps. Lorsque cela se produit, l'application hls ne se charge pas, et aucune vidéo en streaming n'est disponible, cependant, si je charge une page HTML de test avec exactement le même HTML, avec la section div déjà écrite dans le code HTML de le début, au lieu d'envoyer la section div à travers un websocket, puis l'ajouter après que la page du navigateur a chargé, alors cela fonctionne parfaitement ..

même si le code HTML de la page ressemble exactement à l'inspection, le Hls application/streaming vidéo ne fonctionne pas lorsque la section div contenant le premier code ci-dessus est ajoutée à la page Html après réception d'un message websocket ..

pourrait Hl s ne pas être activé parce qu'il est ajouté au document HTML après que le navigateur a accédé au site initialement? Ai-je besoin de faire une sorte de redraw/refresh pour le charger?

Je sais que le Hls ne se recharge pas pour une raison quelconque, car quand Hls fonctionne et que vous inspectez le Html, il ajoute quelque chose au HTML du site sous l'onglet vidéo où le Hls est chargé il ajoute un src qui n'était pas là avant donc quelque chose comme

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

devient

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

cela se produit lorsque je mets le code Hls dans un fichier HTML de test et de le charger comme ça, mais quand la section objet vidéo Hls/script est ajouté à section div qui est envoyé via websocket et ajouté à page après la page des requêtes client, cette section src = "blob: ..." n'est pas automatiquement ajoutée au HTML, ce qui me fait penser que le Hls ne se charge pas lorsqu'il est ajouté à la page après que le client a demandé la page ..

de toute façon je peux rafraîchir la page pour la faire fonctionner ou la forcer à charger l'application après l'ajout de la section div?

un peu coincé ici, donc toute aide est grandement appréciée.

Answer 1

Ceci n'a vraiment rien à voir avec WebSockets, ni avec HLS lui-même. Le problème ici est que vous ajoutez dynamiquement un élément qui ne sera pas automatiquement amélioré par le lecteur HLS que vous utilisez.

Untested, mais la documentation a une 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 !"); 
    });