html控制视频宽高

HTML视频高度的设置主要涉及到HTML和CSS两个部分，HTML负责定义视频的基本结构，而CSS则负责样式的调整，包括视频的高度。

HTML部分

在HTML中，我们使用<video>标签来插入视频，这个标签有一些基本的属性，如src（源）， controls（控制），width（宽度）和height（高度）。height属性在HTML5中被废弃了，因为浏览器通常会根据视频的宽高比自动调整其大小，如果你想要设置视频的高度，你应该使用CSS来实现。

CSS部分

在CSS中，我们可以使用height属性来设置元素的高度，对于<video>标签，我们需要将height属性应用到其父元素上，然后通过设置父元素的宽度和高度比例来调整视频的大小。

假设我们有一个<video>标签如下：

<div class="video-container">
  <video controls>
    <source src="myVideo.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

我们可以添加以下CSS代码来设置视频的高度：

.video-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9宽高比 */
  position: relative;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在这个例子中，我们首先设置了.video-container的宽度为100%，高度为0，并且底部填充为56.25%，这是因为大多数现代视频都是16:9的宽高比，所以我们需要设置一个相应的填充值来保持正确的宽高比，我们将视频的位置设置为绝对，并将其宽度和高度都设置为100%以填充整个容器，这样，无论容器的大小如何，视频都会保持正确的宽高比。

总结

HTML5不直接支持设置视频的高度，但我们可以通过在父元素上设置宽度和高度比例，然后将视频的位置设置为绝对并填充整个父元素来实现，这种方法不仅可以设置视频的高度，还可以确保视频始终保持正确的宽高比。

相关问题与解答

问题1：我可以使用JavaScript来动态改变视频的高度吗？

是的，你可以使用JavaScript来动态改变视频的高度，你只需要获取到视频元素，然后修改其style.height属性即可，但是请注意，由于浏览器通常会根据视频的宽高比自动调整其大小，所以你需要同时修改宽度和高度以保持正确的宽高比。

问题2：如果我希望视频始终保持原始的宽高比，我应该怎么做？

如果你希望视频始终保持原始的宽高比，你应该在设置高度的同时保持宽度不变，你可以使用JavaScript或CSS来实现这一点，你可以使用JavaScript获取到视频的原始宽度和高度，然后计算出应该设置的高度，或者，你也可以使用CSS的aspect-ratio属性来自动计算宽度和高度的比例。