【问题标题】: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 文件,然后我可以正确读取 videoWidthvideoHeight 属性。

标签: 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)
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-04
    • 2017-07-15
    • 2017-09-03
    • 2012-03-19
    • 2023-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多