如何在 javascript 中获取 hls 视频宽度/高度？答案

【问题标题】：How to get hls video width/height in javascript?如何在 javascript 中获取 hls 视频宽度/高度？
【发布时间】：2017-07-06 03:46:28
【问题描述】：

我使用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>

【问题讨论】：

你试过canplay和canplaythrough事件吗？如果视频来源不同，则很可能是您无法使用元数据
@JaromandaX 我尝试播放其他域的 mp4 文件，然后我可以正确读取 videoWidth 和 videoHeight 属性。

标签： javascript video http-live-streaming

【解决方案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>

【讨论】：

video 标签中的 HLS 源代码将直接在 Safari（桌面）以及 iOS 和一些 Android 浏览器上运行。对于 Chrome 或 Firefox 等其他桌面浏览器，hls.js 运行良好，正如您在回答中提到的那样。
我只是想获取视频大小，或者收音机，不需要播放器播放。

【解决方案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)
    }

【讨论】：