如何在不通过 DOM 的情况下确定视频的宽度和高度？

【问题标题】：How can I determine the width and height of a video without going through the DOM?如何在不通过 DOM 的情况下确定视频的宽度和高度？
【发布时间】：2021-10-26 18:55:21
【问题描述】：

如果我想确定图像的宽度和高度，可以执行以下操作：

let image = new Image();
image.src = ...the source ;
image.decode();

console.log( image.width, image.height );

无需创建 DOM 元素来渲染图像然后获取尺寸。

是否可以对视频做类似的事情？如果有，怎么做？

【问题讨论】：

标签： javascript html dom html5-video

【解决方案1】：

这似乎是我想要的：

let video = document.createElement( 'video');

video.setAttribute( "preload", "metadata" );

video.src = // ...the data source

video.addEventListener( 'loadeddata', function() {
    console.log( this.videoWidth, this.videoHeight );

});

我创建了视频元素，但不将其插入 DOM。我相信设置 preload 属性不需要加载整个视频文件，但我不确定。

加载数据并触发loadeddata事件，记录视频的宽度和高度。

我很想知道其他人对此解决方案的看法。

【讨论】：

有时浏览器不会预加载任何属性的视频，尤其是蜂窝网络上的移动浏览器。