基于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 Chrome)高度达到100%；而宽度不能达到100%；右图：(Firefox)高度不能达到100%；而宽度达到100%；

左图：(Safari)高度达到100%；而宽度不能达到100%；右图：(Opera)高度不能达到100%；而宽度达到100%；

接着小果就尝试使用：

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) 右图：(Firefox)

左图：(Safari) 右图：(Opera)

完美解决啊~

那么还有一个问题，padding-bottom的值是怎么得到的呢？

videoH：video的高

videoW：video的宽

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

padBotRes：padding-bottom的值

式子：

padBotRes = (videoH / videoW) * 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邮箱登陆入口在哪里

7485

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 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。