使用此<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大小的多余方法之外,它们还可以起到什么作用?
答案 0 :(得分:2)
它们与<iframe>
或<object>
的相同,并且与<img>
的相似:
它们用作后备设置显示尺寸,对于按行替换的元素,该显示尺寸是按以下顺序计算的(如果在后备之前找到,请保留找到的宽度或高度):
(对于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>
。