Question

使用此<video>元素：

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

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

通过实验，我知道的唯一效果是，如果没有通过CSS指定大小，则width和height属性用作CSS像素中元素的大小

通过这种方式，<video>元素的行为类似于<canvas>元素。但是，在<canvas>元素上，width和height属性还有另一个用途：设置支持画布的2D像素阵列的尺寸。然后，将这个2D像素阵列缩放到canvas元素的显示区域（默认情况下使用object-fit: fill和image-rendering: pixelated）。

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

视频中的像素数量似乎仅来自媒体流本身-如videoWidth元素的videoHeight和<video>属性或{赋予metadata.width回调的框架的{1}}和metadata.height属性。

除非明确设置，否则requestVideoFrameCallback和width属性的值为height，这是JavaScript所报告的。即使在播放视频时也是如此。相反，0和width属性height默认为<canvas>和300，即支持它的2D像素阵列的真实大小。

The MDN documentation将这些属性描述为

150

是一个HTMLVideoElement.height，它以CSS像素表示高度HTML属性，该属性指定显示区域的高度。

DOMString

是一个HTMLVideoElement.width，它以CSS像素反映了HTML宽度属性，该属性指定显示区域的宽度。

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

那么，0元素的width和height属性是什么？除了作为设置CSS大小的多余方法之外，它们还可以起到什么作用？

Answer 1

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

它们用作后备设置显示尺寸，对于按行替换的元素，该显示尺寸是按以下顺序计算的（如果在后备之前找到，请保留找到的宽度或高度）：

CSS定义的宽度+高度
属性定义的宽度+高度
纵横比x先前选择的宽度或高度
媒体定义的宽度+高度
300 x 150px

（对于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>（及其他），它将仅返回属性的值，强制转换为其类型（{{1}为unsigned long）。

因此，如果您未将任何内容设置为属性，则无论呈现的尺寸如何，它的确会返回<video>。

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

1 个答案: