爲什麼HTML視頻標籤有默認大小，並且可以控制它？

Question

我遇到了一個HTML5視頻的問題，它讓我發現video標記元素的默認大小爲300x150，即使未提供源或大小也是如此。這是顯示行爲的簡短片段。

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

Fiddle here

我包括div標籤使用相同的CSS，它是由0像素默認設置爲0px。我已經在Firefox和Chrome中測試過了。如果在Chrome調試器中更改了一個軸的video元素的尺寸，則另一個軸將更改爲保持2-1的比例（這也適用於添加樣式設置寬度：100％）。

此行爲是否在任何地方記錄？我無法找到它發生的原因以及它是否可以控制。我想設置視頻的默認寬高比以避免元素在沒有源或海報時重新縮放。我已經注意到在加載視頻之後出現單幀的情況：海報被隱藏，但視頻內容尚未顯示，導致視頻重新縮放到默認大小。通過設置背景圖像來匹配海報，我避免了視頻變白，但由於長寬比變爲2-1，所以在第一幀期間會有明顯的「閃爍」。能夠將默認寬高比設置爲16-9可以解決此問題。

Answer 1

試試這個：

<video width="300" height="200" controls><source src="path" type="video/mp4"></video> 

Answer 2

您可以在視頻標籤做是正確的有：

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

Answer 3

您可以從樣式表

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

這裏的嘗試無論是內嵌樣式或CSS供參考的鏈接

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