全國咨詢/投訴熱線:400-618-4000

如何使用CSS控制視頻的寬高?

更新時間:2020年12月23日16時45分 來源:傳智教育 瀏覽次數:

好口碑IT培訓

  在網頁中嵌入視頻時,經常會為video標簽添加寬高,給視頻預留一定的空間。給視頻設置寬高屬性后,瀏覽器在加載頁面時就會預先確定視頻的尺寸,為視頻保留合適大小的空間,保證頁面布局的統一。為video標簽添加寬、高的方法十分簡單,可以運用width和height屬性直接為video標簽設置寬高。示例代碼如下。

   <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屬性來縮放視頻,這樣的視頻即使在頁面上看起來很小,但它的原始大小依然沒變,因此在實際工作中要運用視頻處理軟件(如“格式工廠”)對視頻進行壓縮。

猜你喜歡:

HTML5怎樣直接調用網絡音頻視頻文件?

網頁一般用什么工具布局?常用的網頁流程布局介紹

怎樣在列表中嵌套多重子列表【web前端技術文章】

傳智教育web前端培訓課程

人妻系列无码专区_漂亮人妻被中出中文字幕_人妻中文制服巨乳中文