使用原生 JavaScript 获取 HTML5 视频的宽度和高度答案

【问题标题】：Get width and height of HTML5 Video using native JavaScript使用原生 JavaScript 获取 HTML5 视频的宽度和高度
【发布时间】：2013-04-29 07:02:09
【问题描述】：

我正在尝试获取标签的宽度和高度，我正在使用以下标记：

<div class="masked" id="video_container">
    <video id="video" loop="loop" muted="muted" tabindex="0" style="width: 100%; height: 100%;">
        <source src="..." type="..."</source>
        <source src="..." type="..."</source>
    </video>
</div>

关键部分是宽度和高度属性都设置为100%，当窗口改变时，视频的纵横比被保存，但我无法得到它的实际宽度和高度。

我尝试使用 offsetWidth 和 offsetHeight 属性获取值，但它们返回的是视频的实际大小。

编辑：

这是对我有用的代码：

var videoActualWidth = video.getBoundingClientRect().width;
var videoActualHeight = video.getBoundingClientRect().height;

var aspect = videoActualWidth / videoActualHeight;

if (w / h > aspect) {
    video.setAttribute("style", "height: 100%");
} else {
    video.setAttribute("style", "width: 100%");
}

谢谢！

【问题讨论】：

您的意思是说，一旦页面加载并确定了宽度和高度（无论浏览器尺寸如何），您希望视频保持这些原始尺寸，即使浏览器宽度和/或身高变化？
你好，我有一个视频，宽度和高度属性都通过 CSS 设置为 100%。我的父容器是全角的。我的视频以这种方式响应，当我调整浏览器窗口的大小时，它会保持其纵横比并在侧面显示白色条纹。但是在 DOM 中，我的视频元素获得了整个可用空间的宽度，尽管可见它更小。抱歉我的解释不好，今天晚些时候我将设置新的 jsfiddle。

标签： javascript css html video

【解决方案1】：

此代码将为您提供视频标签的尺寸（而不是视频本身的尺寸）

var video = document.getElementById("video");
var videotag_width = video.offsetWidth;
var videotag_height = video.offsetHeight;

此代码将为您提供当前正在播放的视频的尺寸

var video = document.getElementById("video");
var video_height = video.videoHeight;
var video_width = video.videoWidth;

【讨论】：

需要注意的是，video.videoWidth 以 CSS 像素为单位给出了视频的固有尺寸。如果视频完全缩放，它将与元素的尺寸不同。元素的尺寸也不一定等于显示的视频尺寸，因为默认情况下它会缩放以适应元素内部。无法找到答案，我设计了一个解决方案 (calculate dimensions based on difference in aspect ratio)。（披露：那是我的博客）。