masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > 基于html5，父级块中添加video，不能全屏播放的问题解决。

基于html5，父级块中添加video，不能全屏播放的问题解决。

高洛峰
Lepaskan： 2016-10-14 15:03:53
asal
2130 orang telah melayarinya

使用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>
Salin selepas log masuk

代码（body内容）

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

我们按照常规给video标签设置：height：100%；width：100%；

结果如下：

左图：(Google Chrome)高度达到100%；而宽度不能达到100%； 右图：(Firefox)高度不能达到100%；而宽度达到100%；

1.jpg


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

1.jpg

接着小果就尝试使用：

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>
Salin selepas log masuk

结果如下：

左图：(Google Chrome)  右图：(Firefox)

1.jpg

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

1.jpg

完美解决啊~

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

videoH：video的高

videoW：video的宽

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

padBotRes：padding-bottom的值

式子：

padBotRes = (videoH / videoW) * videoTiW


Label berkaitan：
基于html5，父级块中添加video，不能全屏播放的问题解决。
sumber：php.cn
Artikel sebelumnya：Canvas——使用定时器模拟动态加载动画！ Artikel seterusnya：html5：canvas
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2309
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2444
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2058
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1944
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
2009
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan