首頁 > 文章 > web前端 > 基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

高洛峰原創: 2016-10-14 15:03:532070瀏覽

使用video標籤，影片總不能佔滿父級全屏，本來預算的10分鐘工程，結果卡在video這裡了，勤奮的小果，還是打算記下來，共勉。。。

程式碼（css內容）：

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>

程式碼（body內容）

<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>

我們依照常規給video標籤設定：height：100%；width：100%；

結果如下：

Google )高度達100%；而寬度無法達到100%；右圖：(Firefox)高度無法達到100%；而寬度達到100%；

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

左圖：(Safari)高度達到100%；而寬度無法達到100%；右圖：(Opera)高度無法達到100%；而寬度達到100%；

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

接著小果就嘗試使用：

1.使用js賦給video；結果：失敗。

2.使用:-webkit-full-screen{}方法，沒有作用。

3.使用相容...

。。。累趴

之後小果就發現了簡單易操作的方法：

css代碼：（父級高度為0；設定padding-bottom；）

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 45%;   //需要计算得到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>

結果如下：

左圖：(Google Chrome) reee

結果如下：

左圖：(Google Chrome) 圖：(Firefox) 基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

左圖：(Safari) 右圖：(Opera) 基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

bot

videoH：video的高

videoW：video的寬

videoTiW：父級的width ,使用的是百分比

padBot. * videoTiW

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Canvas－使用定時器模擬動態載入動畫！下一篇：Canvas－使用定時器模擬動態載入動畫！

看更多

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

相關文章