跳到主要内容

videoWidth

2025年02月13日
柏拉文
越努力，越幸运

一、认识​

videoWidth/videoHeight 表示视频的原始宽高, 这两个属性会返回视频的自然尺寸，即视频的分辨率，而不是显示在页面上的大小。

  • video.videoWidth 和 video.videoHeight：返回视频的原始分辨率，不受 CSS 样式的影响。

  • video.offsetWidth 和 video.offsetHeight：返回视频实际显示在页面上的尺寸，受 CSS 样式、父容器等因素影响。

如果视频的宽高没有显式设置，videoWidth 和 videoHeight 会提供视频的原始分辨率。如果这些属性返回 0，可能是视频尚未加载完成，或者 video 元素没有 src 或 source 属性时。

video 元素尺寸设置优先级为: Css width/height 然后 width/height, 如果两个都没有设置, 会显示 video 原始分辨率 videoWidth/videoHeight。当然, 获取这些值都需要等待视频数据加载完成。

二、语法​

const video = document.querySelector("video");

const videoWidth = video.videoWidth;
const videoHeight = video.videoHeight;

console.log("视频的原始宽度:", videoWidth);
console.log("视频的原始高度:", videoHeight);