更新時間:2020-12-23 來源:黑馬程序員 瀏覽量:
在網(wǎng)頁中嵌入視頻時,經(jīng)常會為video標(biāo)簽添加寬高,給視頻預(yù)留一定的空間。給視頻設(shè)置寬高屬性后,瀏覽器在加載頁面時就會預(yù)先確定視頻的尺寸,為視頻保留合適大小的空間,保證頁面布局的統(tǒng)一。為video標(biāo)簽添加寬、高的方法十分簡單,可以運(yùn)用width和height屬性直接為video標(biāo)簽設(shè)置寬高。示例代碼如下。
<style type="text/css"> *{ margin:0; padding:0; } div{ width:600px; height:300px; border:1px solid #000; } video{ width:200px; height:300px; background:#9CCDCD; float:left; } p{ width:200px; height:300px; background:#999; float:left; } </style> </head> <body> <div> <p>占位色塊</p> <video src="video/pian.mp4" controls="controls">瀏覽器不支持video標(biāo)簽</video> <p>占位色塊</p> </div> </body>
運(yùn)行示例代碼,效果如圖1所示。
圖1 定義視頻寬高
此時如果更改示例中的代碼,刪除視頻的寬度和高度屬性,修改后的代碼如下:
video{ background:#F90; float:left; }
保存HTML文件,刷新頁面,效果如圖2所示。
圖2 刪除視頻寬高
從圖2可以看出,視頻和其中一個灰色文本模塊被擠到了大盒子下面。這是因為未定義視頻寬度和高度時,視頻會按原始大小顯示,此時瀏覽器因為沒有辦法控制視頻尺寸,只能按照視頻默認(rèn)尺寸加載視頻,從而導(dǎo)致頁面布局混亂。
注意:
通過width和height屬性來縮放視頻,這樣的視頻即使在頁面上看起來很小,但它的原始大小依然沒變,因此在實(shí)際工作中要運(yùn)用視頻處理軟件(如“格式工廠”)對視頻進(jìn)行壓縮。
猜你喜歡:
書寫CSS需要遵循哪些規(guī)則?它的結(jié)構(gòu)有什么特點(diǎn)?