更新時間:2020-12-23 來源:黑馬程序員 瀏覽量:
在網頁中嵌入視頻時，經常會為video標簽添加寬高，給視頻預留一定的空間。給視頻設置寬高屬性后，瀏覽器在加載頁面時就會預先確定視頻的尺寸，為視頻保留合適大小的空間，保證頁面布局的統一。為video標簽添加寬、高的方法十分簡單，可以運用width和height屬性直接為video標簽設置寬高。示例代碼如下。
JavaEE
鴻蒙應用開發(fā)
HTML&JS+前端
Python+大數據開發(fā)
人工智能開發(fā)
AI+設計
軟件測試
新媒體+短視頻
集成電路應用開發(fā)
<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標簽</video>
<p>占位色塊</p>
</div>
</body>
運行示例代碼，效果如圖1所示。
圖1 定義視頻寬高
此時如果更改示例中的代碼，刪除視頻的寬度和高度屬性，修改后的代碼如下：
video{
background:#F90;
float:left;
} 保存HTML文件，刷新頁面，效果如圖2所示。
圖2 刪除視頻寬高
從圖2可以看出，視頻和其中一個灰色文本模塊被擠到了大盒子下面。這是因為未定義視頻寬度和高度時，視頻會按原始大小顯示，此時瀏覽器因為沒有辦法控制視頻尺寸，只能按照視頻默認尺寸加載視頻，從而導致頁面布局混亂。
注意：
通過width和height屬性來縮放視頻，這樣的視頻即使在頁面上看起來很小，但它的原始大小依然沒變，因此在實際工作中要運用視頻處理軟件(如“格式工廠”)對視頻進行壓縮。
猜你喜歡：
.jpg)