html - 为什么HTML video标签有默认大小，而且可以控制？

Question

我遇到了一个 HTML5 视频问题，它让我发现 video 标签元素的默认大小为 300x150，即使没有提供来源或大小也是如此。这是一个显示行为的简短片段。

<video style="background-color: red;">
</video>
<div style="background-color: blue;">
</div>

Fiddle here

我用相同的 CSS 包含了 div 标签，它默认设置为 0px by 0px。我已经在 Firefox 和 Chrome 中对此进行了测试。如果在 Chrome 调试器中更改了一个轴 video 元素的尺寸，则更改另一个轴以保持 2-1 比例(这也适用于添加样式设置宽度:100%)。

是否在任何地方记录了这种行为？我无法找到任何关于它发生的原因以及它是否可以控制的信息。我想设置视频的默认宽高比，以避免元素在既没有来源也没有海报时重新缩放。我注意到在加载视频后的单帧期间发生了这种情况:海报被隐藏但视频内容尚未显示，导致视频重新缩放为默认大小。我通过将背景图像设置为与海报相匹配来避免视频变白，但由于宽高比变为 2-1，所以在第一帧中出现明显的“闪烁”。能够将默认宽高比设置为 16-9 可以解决此问题。

Answer 1

您可以尝试内联样式或样式表中的 css

<video src="video/video.mp4" type="video/mp4" controls poster="video.png" id="styled_video" muted preload="metadata" loop>

这是一个引用链接

http://ronallo.com/blog/styling-html5-video-with-css/