首頁技術(shù)文章正文

嵌入視頻如何為video標(biāo)簽添加寬高？

更新時(shí)間:2020-12-23 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


　　在網(wǎng)頁中嵌入視頻時(shí)，經(jīng)常會為video標(biāo)簽添加寬高，給視頻預(yù)留一定的空間。給視頻設(shè)置寬高屬性后，瀏覽器在加載頁面時(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所示。

1615864341164_css控制視頻寬高.png

　　圖1 定義視頻寬高

　　此時(shí)如果更改示例中的代碼，刪除視頻的寬度和高度屬性，修改后的代碼如下：

video{

  background:#F90;

  float:left; 

}

　　保存HTML文件，刷新頁面，效果如圖2所示。

1615864348258_css控制視頻寬高1.png

　　圖2 刪除視頻寬高

　　從圖2可以看出，視頻和其中一個(gè)灰色文本模塊被擠到了大盒子下面。這是因?yàn)槲炊x視頻寬度和高度時(shí)，視頻會按原始大小顯示，此時(shí)瀏覽器因?yàn)闆]有辦法控制視頻尺寸，只能按照視頻默認(rèn)尺寸加載視頻，從而導(dǎo)致頁面布局混亂。

　　注意：

　　通過width和height屬性來縮放視頻，這樣的視頻即使在頁面上看起來很小，但它的原始大小依然沒變，因此在實(shí)際工作中要運(yùn)用視頻處理軟件(如“格式工廠”)對視頻進(jìn)行壓縮。



猜你喜歡：

書寫CSS需要遵循哪些規(guī)則？它的結(jié)構(gòu)有什么特點(diǎn)？

HTML5頁面頭部信息相關(guān)標(biāo)簽是如何編輯的？

如何單獨(dú)制作不同于PC端的移動端頁面？/a>

黑馬程序員web前端培訓(xùn)課程 

分享到：
在線咨詢 我要報(bào)名
和我們在線交談！