首頁 > web前端 > H5教程 > 主體

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

高洛峰
發布: 2016-10-14 15:03:53
原創
2102 人瀏覽過

使用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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板