javascript - 使用原生 JavaScript 获取 HTML5 视频的宽度和高度

Question

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

<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%");
}

谢谢！

Answer 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;