基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。-H5教程-PHP中文網

首頁

web前端

H5教程

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

高洛峰

Oct 14, 2016 pm 03:03 PM

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

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee