Comment obtenir hls largeur/hauteur vidéo en javascript?

Question

J'utilise l'étiquette video pour lire la vidéo HLS, et la taille de la vidéo est 0 toujours.

<video id=video src="http://xxx.m3u8" autoplay controls/> 
<script> 
    const video = document.getElementById('video') 
    video.addEventListener('play',() => { 
     console.log(video.videoWidth, video.videoHeight) 
     // both is 0 
    }) 
</script> 

Answer 1

navigateurs de bureau Actuellement ne pas support jouant un vidéo HLS directement en utilisant simplement la balise vidéo. (Peut-être que cela fonctionne sur Safari ou IOS).

Pour reproduire un flux HLS, vous devez utiliser l'un des lecteurs vidéo disponibles. Vous avez des projets open source, comme hlsjs: https://github.com/video-dev/hls.js. Ou des joueurs comerciaux comme flowplayer, ou jwplayer.

code html de base en utilisant lecteur hlsjs:

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