如何在 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 流，您需要使用可用的视频播放器之一。 你有一些开源项目，比如 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>

Answer 2

"loadedmetadata"用于 HLS 流，
所以这是最好的解决方案

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