JavaScriptのhlsビデオの幅/高さを取得するには？

Question

videoタグを使用してHLSビデオを再生し、ビデオサイズは常に0です。

<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

現在のデスクトップのブラウザでは、直接ちょうどvideoタグを使用してHLSのビデオを再生ないサポートを行います。 （SafariやIOSで動作するかもしれない）。

HLSストリームを再生するには、使用できるビデオプレーヤの1つを使用する必要があります。 hlsjs：https://github.com/video-dev/hls.jsのようなオープンソースプロジェクトがいくつかあります。または、フロープレーヤーやjwplayerのような商業的プレーヤー。 hlsjsプレーヤー使用

基本的な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>