下面的視頻標(biāo)簽height設(shè)置成百分比，在微信小程序中解析出來壓根不顯示，直接審查元素發(fā)現(xiàn)video的高度是0：

<div class="video-box">
  <video src="https:xxx.com/54321.mp4" width="100%" height="100%" />
</div>

1.png

微信小程序video組件默認(rèn)是 width:300px，height:225px，但是如果有設(shè)置width和height會(huì)覆蓋掉默認(rèn)值，開始我以為是用百分比設(shè)置height這種寫法不規(guī)范，或者不支持百分比設(shè)置高度。

從網(wǎng)上的一些文檔上包括最權(quán)威的MDN，都說明了height的單位是CSS像素，難道是真的不支持百分比？

2.JPG

但是呢，和height對(duì)應(yīng)的width又是支持百分比的，實(shí)際去設(shè)置成不同的值也是有效的，不支持這個(gè)假設(shè)看來是不成立了。

接著繼續(xù)去瀏覽器里找找原因，同樣的代碼在瀏覽器中神奇的可以顯示出視頻來，但是直接去修改height的百分比值是無效的。

3.png

到這里大概能得出結(jié)論：

1、video的height設(shè)置百分比在瀏覽器和小程序中都是無效的
2、瀏覽器會(huì)去默認(rèn)處理video的百分比高，讓video正常顯示
3、小程序會(huì)用百分比覆蓋掉video組件默認(rèn)的height:225px，視頻不顯示

還額外發(fā)現(xiàn)一點(diǎn)，瀏覽器中height的默認(rèn)單位是px，如果數(shù)值后面跟的是其他任何字符，入：#、vh、xx...谷歌瀏覽器都會(huì)默認(rèn)給轉(zhuǎn)成px，但是 % 卻不會(huì)轉(zhuǎn)，那從這也說明video的高度肯定是支持百分比的。

在回過頭來看上面的代碼，其實(shí)我們一直忽視了video組件的父級(jí)元素 video-box，height設(shè)置成百分比本來就是相對(duì)父級(jí)元素的百分比，如果父級(jí)元素沒有高度值也就是 height:0，那子元素的height設(shè)置成任何的百分比也都是0。

實(shí)際在小程序和瀏覽器里驗(yàn)證，也確實(shí)是如此，只要給父元素設(shè)置一個(gè)具體的高度，那video的height設(shè)置成百分比是有效的。