How to get hls video width/height in javascript?

Question

I use video tag to play HLS video, and the video size is 0 always.

<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

Currently desktop browsers do not support playing an HLS video directly using just the video tag. (Maybe it does work on Safari or IOS).

To reproduce an HLS stream you need to use one of the video players available. You have some open source projects, like hlsjs: https://github.com/video-dev/hls.js . Or comercial players like flowplayer, or jwplayer.

Basic html code using hlsjs player:

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

Answer 2

"loadedmetadata" wont' work for HLS streams ,
so this is the best solution

var video = document.getElementById("video")
video.onplaying = function () {
    var width = video.videoWidth
    var height = video.videoHeight
    console.log("video dimens loaded w="+width+" h="+height)
    }