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

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 属性还有另一个用途：设置支持 canvas 的二维像素数组的维度。然后将这个二维像素数组缩放到 canvas 元素的显示区域（默认使用 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

Is a DOMString that reflects the height HTML attribute, which specifies the height of the display area, in CSS pixels.

HTMLVideoElement.width

Is a DOMString that reflects the width HTML attribute, which specifies the width of the display area, in CSS pixels.

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

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

Answer 1

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

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

CSS定义宽度+高度
属性定义宽度+高度
Aspect-ratio x 先前选择的宽度或高度
媒体定义的宽度 + 高度
300 x 150 像素

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

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 将 return 渲染的 CSS 尺寸，而对于 <video>（和其他），它只会 return 属性的值，强制为其类型（unsigned long for <video>）。

因此，如果您不设置任何属性，它确实会 return 0，无论渲染维度如何。

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

What are the width and height properties of a video element?

html

css

video

canvas