视频元素的宽度和高度属性是什么？

Question

取这个<video>元素：

<video height=5 width=10><source src="..." type="video/mp4"></video>

设置height=5 width=10，或随后通过JavaScript设置这些属性有什么效果？

通过实验，我知道的唯一效果是 width 和 height 属性用作以 CSS 像素为单位的元素大小（如果没有通过 CSS 指定大小）。

这样，<video> 元素的行为类似于<canvas> 元素。但是在<canvas> 元素上，width 和height 属性还有另一个用途：设置支持画布的二维像素数组的尺寸。然后将这个二维像素数组缩放到画布元素的显示区域（默认使用object-fit: fill 和image-rendering: pixelated）。

但width 和height 属性似乎没有为视频设置任何类型的“支持数组大小”。在<video> 元素上设置width 和height 属性时，它不会对视频流的像素化产生明显的影响。

视频中的像素数似乎只是来自媒体流本身——如<video> 元素的videoWidth 和videoHeight 属性或metadata.width 和metadata.height 中所示赋予requestVideoFrameCallback 回调的帧的属性。

除非明确设置，否则 width 和 height 属性的值是 0，正如 JavaScript 所报告的那样。即使在播放视频时也是如此。相比之下，width 和 height 属性 <canvas> 默认为 300 和 150，这是支持它的二维像素数组的真实大小。

The MDN documentation 将这些属性描述为

HTMLVideoElement.height

是一个DOMString，反映了html的height属性，它指定了显示区域的高度，以CSS像素为单位。

HTMLVideoElement.width

是一个DOMString，反映了html的width属性，它指定了显示区域的宽度，以CSS像素为单位。

但这似乎不正确，因为默认值 0 是为显然没有零显示区域的视频提供的。我也不相信这个描述，因为“显示区域的宽度/高度，以 CSS 像素为单位”可以通过 CSS 完美设置，使得这些属性完全多余。

那么，<video> 元素的width 和height 属性是什么？除了作为设置 CSS 大小的冗余方式之外，它们还有什么用途？

Answer 1

它们与<iframe> 或<object> 的相同，与<img> 的相似：

它们用作设置显示大小的回退，对于内联替换元素，按此顺序计算（如果在回退之前找到，则保留任何找到的宽度或高度）：

1. CSS 定义的宽度 + 高度
2. 属性定义宽度 + 高度
3. 纵横比 x 先前选择的宽度或高度
4. 媒体定义的宽度 + 高度
5. 300 x 150 像素

（对于 SVG 图像等媒体，步骤 3 和 4 实际上更复杂）。

document.querySelectorAll("video").forEach( elem => elem.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm");

.css-width {
  width: 200px;
}
.css-height {
  height: 200px;
}
video {
  border: 1px solid;
}
section {
  border-bottom: 1px solid;
}

<section>
  <p>CSS width + CSS height + width attribute + height attribute</p>
  <video class="css-width css-height" width="10" height="10"></video>
  <p>CSS dimensions win</p>
</section>
<section>
  <p>CSS width + width attribute + height attribute:</p>
  <video class="css-width" width="10" height="10"></video>
  <p>CSS dimensions is used for width, attribute is used for height</p>
</section>
<section>
  <p>CSS width + height attribute:</p>
  <video class="css-width" height="10"></video>
  <p>Attributes are used</p>
</section>
<section>
  <p>CSS width only:</p>
  <video class="css-width"></video>
  <p>CSS width is used for width, height is set to the intrinsic aspect-ratio * width</p>
</section>
<section>
  <p>width attribute only:</p>
  <video width="10"></video>
  <p>Attribute width is used for width, height is set to the intrinsic aspect-ratio * width</p>
</section>
<section>
  nothing:<br>
  <video></video>
  <p>intrinsic dimensions are used</p>
</section>

然而，它们与<img> 的不同之处在于at getting <img> ones 将返回呈现的CSS 尺寸，而对于<video>（和其他），它只会返回属性的值，强制为其类型（@ 987654332@ 为<video>)。

因此，如果您没有将任何内容设置为属性，那么无论呈现的尺寸如何，它都会返回 0。