javascript - 如何在 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 are 0
    })
</script>

Answer 1

目前桌面浏览器不支持仅使用视频标签直接播放 HLS 视频。 (也许它确实适用于 Safari 或 IOS)。

要重现 HLS 流，您需要使用可用的视频播放器之一。你有一些开源项目，比如 hlsjs:https://github.com/video-dev/hls.js .或者像 flowplayer 或 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>