HTML5中video-高度宽度

最新推荐文章于 2025-06-16 18:41:56 发布

我家小宝_朱朱

最新推荐文章于 2025-06-16 18:41:56 发布

阅读量1.9w

点赞数

分类专栏： html5-video

html5-video 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用video标签的videoHeight和videoWidth属性来实现视频自适应布局的方法。通过计算视频的长宽比，并在加载完成后调整外层边框的高度，确保视频能够在不同尺寸的屏幕上保持原始比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实际上，在video标签中，有这样一个属性可以为我们使用：videoHeight&videoWidth，他获取的是video的高度和宽度（媒体本身），虽然不能直接使用，但我想，我们可以通过计算长宽比来解决这个问题。

通过加载后，获取元素实际高度，设置外层边框的高度

var myvObj = document.getElementById("myv");
myvObj.addEventListener("loadedmetadata", function () {
console.log(this.videoHeight+" "+this.videoWidth);
var height = $(this).height();
console.log(height);
$(".video-wrap").css('height',height);
});

<div class="r-content">
<div class="video-wrap" >
<video src="http://locolhost:9090/111.mp4" width='100%' controls="controls" class="video"
preload="metadata" type="video/mp4" id="myv">
Your browser does not support the video tag.
</video>
</div>
</div>