基於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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

h5項目怎麼運行 Apr 06, 2025 pm 12:21 PM

運行 H5 項目需要以下步驟：安裝 Web 服務器、Node.js、開發工具等必要工具。搭建開發環境，創建項目文件夾、初始化項目、編寫代碼。啟動開發服務器，使用命令行運行命令。在瀏覽器中預覽項目，輸入開發服務器 URL。發布項目，優化代碼、部署項目、設置 Web 服務器配置。

H5頁面製作究竟指什麼 Apr 06, 2025 am 07:18 AM

H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。